Question

实际上我正在尝试在Jquery中实现平滑滚动，并且我编写的任何代码似乎都运行正常，但我还想实现一个功能，当用户向下/向上滚动时，我的Nav类更改为活动状态位置。下面链接到代码将让您更多地了解我在说什么。我面临的问题是，即使我点击下一个nav子元素，活动类也被设置为前一个元素。我有用户window.scroll查询infact这部分实际上是从网上得到的。我真的理解代码，这就是为什么它很难调试和修复它，所以如果有人能够解决它，如果你解释我这个代码实际在做什么以及当前实现的问题是什么真的很好

http://codepen.io/anon/pen/GqJmK

JS

$(document).ready(function(){

    var lastId,
    header = $("#header"),  
    topMenu = $("#nav"),
    topMenuHeight = topMenu.outerHeight()+header.outerHeight()+25,
    menuItems = topMenu.find("a"),
    //menuItems = topMenu.find("a:not([href^='http://'],[href^='/'])"),
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });


    menuItems.on('click',function (e) {
        e.preventDefault();

        _this = this;
        var target = _this.hash,
        $target = $(target);
        //menuItems.parent().removeClass("active");
        //$(_this).parent().addClass("active");
        $('html, body').stop().animate({
            'scrollTop': ($target.offset().top) - topMenuHeight + 1
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

    $(window).scroll(function(){

            var fromTop = $(this).scrollTop()+topMenuHeight;

            var cur = scrollItems.map(function(){
              if (($(this).offset().top +20)< 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");
            }           
    });

    /*$( window ).resize(function() {
            alert($( window ).width());
            alert($( document ).width());
    }); */


});

Answer 1

你可能最好使用某种插件来实现这种效果。 http://lirancohen.github.io/stickUp/或http://www.outyear.co.uk/smint/demo/之类的东西可以解决问题

Answer 2

只需更新滚动检查功能＆amp;让你的位置检查更加灵活，即让它考虑你在进入之前进入一个部分。在代码中的第35行进行此更改 -

if (($(this).offset().top - 50)< fromTop)

工作演示 - http://codepen.io/nitishdhar/pen/LEAzI

您还可以通过实施此功能来改进您的用户界面 - http://css-tricks.com/hash-tag-links-padding/

根据最高位置更新Div的类名

2 个答案: