固定div滚动时的活动菜单

Question

我正在尝试使页面滚动时激活菜单。

这是我到目前为止尝试过的。

    $(document).ready(function () {
        $(document).on("scroll", onScroll);
        
        //smoothscroll
        $('.menu a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");
            
            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');
          
            var target = this.hash,
                menu = target;
            $target = $(target);
            $('.wrap_scroll').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('.menu a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('.menu ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

  body, html {  margin: 0; padding: 0; height: 3000px; }
    .menu {   width: 100px; position: fixed;  top:10px; left:10px; }  
    .menu  a.active { background:red }


    .wrap_scroll { position:fixed ; top:20px; left:150px; width:500px; height:400px; overflow-y:scroll }
    #home {  background-color: #286090;  height: 200px; }
    #portfolio {  background: gray; height: 600px; } 
    #about { background-color: blue; height: 800px; }
    #contact {   background:yellow; height: 300px; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="menu"> 
      <ul>
        <li><a class="active" href="#home">Home</a> </li>
        <li><a href="#portfolio">Portfolio</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#contact">Contact</a>   </li>
      </ul> 
    </div>


    <div class="wrap_scroll"> 
      <div id="home">hh</div>
      <div id="portfolio">pp</div>
      <div id="about">aa</div>
      <div id="contact">cc</div> 
    </div>

JSFiddle

问题是，如果div（页面）的位置固定，则页面滚动无法顺利进行。并且导航活动项也无法正常工作。

我需要更改密码吗？

请帮助。

Answer 1

您需要在$('.wrap_scroll')而不是document上绑定滚动事件，因为您正在滚动wrap_scroll div而不是整个文档，因此我修改了代码片段

$(document).ready(function () {
        $('.wrap_scroll').bind("scroll",onScroll);
        
        //smoothscroll
        $('.menu a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");
            
            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');
          
            var target = this.hash,
                menu = target;
            $target = $(target);
            $('.wrap_scroll').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
        function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('.menu a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('.menu ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }
    });

body, html {  margin: 0; padding: 0; height: 3000px; }
    .menu {   width: 100px; position: fixed;  top:10px; left:10px; }  
    .menu  a.active { background:red }


    .wrap_scroll { position:fixed ; top:20px; left:150px; width:500px; height:400px; overflow-y:scroll }
    #home {  background-color: #286090;  height: 200px; }
    #portfolio {  background: gray; height: 600px; } 
    #about { background-color: blue; height: 800px; }
    #contact {   background:yellow; height: 300px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="menu"> 
      <ul>
        <li><a class="active" href="#home">Home</a> </li>
        <li><a href="#portfolio">Portfolio</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#contact">Contact</a>   </li>
      </ul> 
    </div>


    <div class="wrap_scroll"> 
      <div id="home">hh</div>
      <div id="portfolio">pp</div>
      <div id="about">aa</div>
      <div id="contact">cc</div> 
    </div>