.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*7 像素边框 (+ 14) 自动添加上边距。我知道这很愚蠢，但我很高兴它以这种方式工作。

所以我想寻求一种方法来增加偏移量。或者可能添加受 "the margin calculator" 影响的第一个元素的偏移量，我在上面提到过。

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

Answer 1

使用这个

$('.mainh').outerHeight(真)

Answer 2

为什么不将横幅的高度减去 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);
});

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

.scrollTop to an element with fixed banner on top of screen

html

javascript

css

jquery

scrolltop