Question

我使用以下jQuery点击功能跳转到长滚动页面的各个部分（通过锚点ID），这些部分也会影响 - 因此偏移 - 固定导航标题的高度：< / p>

$('#nav a').click(function(){
    var el = $(this).attr('href');
    var elWrapped = $(el);

    scrollToDiv(elWrapped,75);
    return false;

});
function scrollToDiv(element,navheight){
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop-navheight;

    $('body,html').animate({
    scrollTop: totalScroll
    }, 500);
}

这非常有效，但是，这种方法的唯一缺点是我必须定义一个量来从页面顶部偏移滚动 - 在这种情况下，是75px，即固定标题的高度。对于固定标题的高度可能会发生变化的情况 - 比如说通过媒体查询进行移动 - 这个高度可能不准确，并且链接不会被正确的空间量偏移。

因此，我想知道如何通过计算标题的实际高度和偏移量来更改/增加此功能，加说10个额外的像素来说明部分填充

感谢您的帮助。

Answer 1

单击按钮时，您可以获得标题的高度。

$('#nav a').click(function(){
    var el = $(this).attr('href');
    var elWrapped = $(el);
    var header_height = $('#header-id-goes-here').height() + 10;
    //var header_height = $('#header-id-goes-here').outerHeight(); You might need outerHeight if you have padding and borders

    scrollToDiv(elWrapped,header_height);
    return false;
});

jQuery滚动功能：按固定标题的高度偏移

1 个答案: