粘性欄上的活動菜單轉換器

Question

我設計了帶有粘性菜單欄的視差頁面。 我需要在滾動時更改活動菜單。 我已完成更改Click事件上的活動類。 但是我需要它來做滾動事件。

這是我的HTML代碼

<div class="main-menu">

    <ul>             
        <li><a class="active" href="#" data-delay="2000" data-appear="false" data-scrollto="#intro-slideshow">Home</a></li>
        <li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#overview">Features</a></li>
        <li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#categories">Categories</a></li>
        <li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#contact">Contact Us</a></li>
    </ul>

</div>

這是我的Onclick Active Menu Changer的JQuery代碼

$('*[data-scrollto]').click(function(){

        $( "a" ).removeClass( "active" );
        $(this).addClass("active");

        var dest = $(this).data('scrollto');                
        var pixels = $(dest).offset().top - 70;         
        var ms = Math.round(1000 + pixels/5);

        $('html, body').animate({               
            scrollTop: pixels
        }, ms, 'easeOutQuint');

    }); 

如何使用Data-Scrollto屬性更改Scroll Event上的活動類？

Answer 1

無需贅述。 您需要將scroll事件綁定到包含element或類似於窗口的東西。

http://api.jquery.com/scroll/

這是一個非常相似的演示。 希望對您有所幫助。

https://jsfiddle.net/vsmrnd7L/1/

編輯：

var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

$(window).scroll(function(){
   var fromTop = $(this).scrollTop()+topMenuHeight;
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });

   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});