javascript - .scrollTop 到屏幕顶部带有固定横幅的元素

Question

我已经想出了如何像这样制作 scrollTop:

$("#nav-home").click(function() {
    $('html, body').animate({scrollTop: $("#content-home").offset().top}, 800);
});

但我的问题是我在屏幕顶部有一个固定的横幅，所以当它滚动页面时，#content-home 元素的部分被横幅隐藏了。

我也在用这个:

var hheight = $(".mainh").height();
var theight = hheight + 14;
$("#first-content").css("margin-top", mheight + "px")

根据横幅的高度 + 2*7px 边框 (+ 14) 自动添加上边距。我知道这很愚蠢，但我很高兴它以这种方式工作。

所以我想寻求一种方法来增加偏移量。或者可能添加受我上面提到的“边距计算器”影响的第一个元素的偏移量。

如果您能帮我解决这个问题，甚至可以添加一些提示，我会非常高兴。

Answer 1

为什么不将横幅的高度减去 scrollTop 数字？

var contentTop = $("#content-home").offset().top;
var hheight = $(".mainh").outerHeight(true); // the 'true' in the statement will include the top and bottom margin of the element, if they exist.
var scrollTopY = contentTop - hheight;

$("#nav-home").click(function() {
    $('html, body').animate({scrollTop: scrollTopY}, 800);
});