代码之家 › 专栏 › 技术社区 › Mario83

使用jquery滚动时如何为每个锚点设置不同的偏移量

scroll css html jquery javascript

Mario83 · 技术社区 · 8 年前

我在页面上有几个分区,每个分区都有指定的分区ID。我已经添加了jquery函数来滚动到定位点,但是我不能让所有的定位点在滚动后显示在同一个地方。

我有健康、医学、金融、报纸等部门。单击“健康”滚动到健康部分的顶部,但单击“财务”链接滚动到财务部分,但带有偏移量。它不会停在最上面。

我的剧本如下。

<script type="text/javascript"> 
/* show active navigation element */
jQuery(document).ready(function () {
jQuery(document).on("scroll", onScroll);

});

//get scroll position and handle class active
function onScroll(event){
    var scrollPos = jQuery(document).scrollTop()+450;
    jQuery('#nav li a').each(function () {
        var currLink = jQuery(this);
        var refElement = jQuery(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            jQuery('#nav li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

/* activate sticky navigation */
jQuery(document).ready(function() {  
   var stickyNavTop = jQuery('#nav').offset().top;  

   var stickyNav = function(){  
   var scrollTop = jQuery(window).scrollTop();  

   if (scrollTop > stickyNavTop) {   
       jQuery('#nav').addClass('sticky');  
   } else {  
       jQuery('#nav').removeClass('sticky');   
   }  
};  
stickyNav();  

jQuery(window).scroll(function() {  
    stickyNav();  
    });  
}); 
</script>

我发现了一个类似的问题 here ,但我无法使它与我的代码一起工作。

如何使用我使用的jquery控制每个定位点的滚动偏移?

1 回复 | 直到 8 年前

Clément Jacquelin 8 年前

我看到你的导航有点粘 stickyNav(); ,这可能会导致偏移的问题。

为了获得锚定的正确偏移量,您必须注意将粘性导航的高度添加到滚动操作中,如下所示:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
        // 100 is the sticky nav height
    }, 500);
});

有关详细信息,请参阅此文章: Smooth scrolling when clicking an anchor link