Question

我在网站上的所有部分都有导航栏。在移动视图中，该导航栏是带有滚动条的一行。

当我将页面向下滚动到该部分时，我想自动导航此导航栏。

在不使用滑块的情况下能否实现？

.wrapper {
  width: 360px;
  height: 720px;
  border: 1px solid #000;
}

ul {
  list-style-type: none;
  padding: 10px 0;
  margin: 10px 0;
  display: flex;
  background: #ccc;
}

li {
    margin: 0 8px;
  }

<div class="wrapper">
  <ul>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>
  <li>link</li>    
</ul>
</div>

Answer 1

html, body {
            margin: 0px;
            padding: 0px;
        }

        header {
            width: 100%;
            position: fixed;
            background-color: rgba(0, 0, 0, 0.7);
        }

        nav {
            max-width: 700px;
            margin: 0 auto;
            padding: 4px;
        }

        nav a {
            color: white;
            padding: 2px;
        }

        .content-container {
            max-width: 700px;
            margin: 0 auto;
        }

        .section-content {
            padding: 10px 0px;
        }

        .flex-container {
            display: flex;
            justify-content: space-around;
        }

        .flex-column {
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin: 2.5px;
            display: inline-block;
        }
<header>
            <nav>
                <a href="#first">Section1</a>
                <a href="#second">Section 2</a>
                <a href="#third">Section 3</a>
                <a href="#fourth">Section 4</a>
            </nav>
        </header>
        <div class="content-container">
            <div class="section-content" id="first">
                <h3>Section 1</h3>
                <div class="flex-container">
                    <p class="flex-column">Hello world!</p>
                    <p class="flex-column">Hello world!</p>
                    <p class="flex-column">Hello world!</p>
                    <p class="flex-column">Hello world!</p>
                </div>
            </div>
            <div class="section-content" id="second">
                <h3>Section 2</h3>
                <div class="flex-container">
                    <p class="flex-column">Hello world!</p>
                    <p class="flex-column">Hello world!</p>
                    <p class="flex-column">Hello world!</p>
                    <p class="flex-column">Hello world!</p>
                </div>
                <p>Item of div section 2.</p>
            </div>
            <div class="section-content" id="third">
                <h3>Section 3</h3>
                <p>Item of div section 3.</p>
            </div>
            <div class="section-content" id="fourth">
                <h3>Section 4</h3>
                <p>Item of div section 4.</p>
            </div>
        </div>

    <script type = "text/javascript">
                $(document).ready(function(){
                        $('a[href^="#"]').on('click', function (e) {
                            e.preventDefault();
                            var target = this.hash;
                            var $target = $(target);
                            $('html, body').animate({
                                'scrollTop': $target.offset().top
                            }, 1000, 'swing');
                        });
                    });
                </script>

Working code by me

滚动页面时进行水平滚动

1 个答案: