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

没有深入细节。您需要将滚动事件绑定到包含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");
   }                   
});

粘性栏上的活动菜单更换器

1 个答案: