Question

我不明白为什么我的代码无法正常工作我在我的页面上创建了一个无法正常工作的项目符号菜单。子弹与每个部分不对应。例如，最后一个项目符号与“联系”部分（上一部分）不对应。

Bullet 1 => Home - "Bullet 1" title
Bullet 2 => "Bullet 2" title
Bullet 3 => "Bullet 3" title
Bullet 4 => "Bullet 4" title

当我滚动页面时子弹不对应，当我点击相同的子弹时： - （

PS：由于结构原因，我无法使用 $（窗口）或$（'html，body'）代替 $（'＃page'）我的页面。

http://jsfiddle.net/Xroad/FtaL3/2/

我不明白为什么我的代码无法正常运行，任何想法？

$(function(){

    var sections = [];
    var id = false;
    var $navbar = $('.navbar');
    var $navbara = $('a', $navbar);

    $navbara.click(function(e){
        $('#page').animate({
            scrollTop: $($(this).attr('href')).offset().top
        });
    });

    $navbara.each(function(){
        sections.push($($(this).attr('href')));
    });

    $('#page').scroll(function(e){
        var scrollTop = $(this).scrollTop() + ($('#page').height() / 2)
        for(var i in sections){
            var section = sections[i];
            if (scrollTop > section.offset().top) {
                scrolled_id = section.attr('id');
            }
        }
        if (scrolled_id !== id) {
            id = scrolled_id
            $navbara.removeClass('current');
            $('a[href="#' + id + '"]', $navbar).addClass('current');
        }
    });

});

Answer 1

您正在使用$(selector).offset().top来确定应该在哪个位置滚动，但请记住，这是绑定到窗口的动态值，当前窗口顶部边框越近，该值越小将是。

要解决此问题，您应该考虑该值。

Answer to similar question解决了这个问题：

var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
    dest = $(document).height() - $(window).height();
}
else {
    dest = $(this.hash).offset().top;
}
$('#page').animate({
    scrollTop: $(dest).offset().top
});

我对您的代码http://jsfiddle.net/FtaL3/4/

进行了更新

请注意，您的代码存在更多问题，而且还有更多内容，但这些内容无效。

PS：我宁愿使用 Twitter Bootstrap 库，也会使用Scrollspy来制作该菜单。

我的jQuery项目符号菜单中的功能障碍

1 个答案: