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）自动添加上边距。我知道这很愚蠢，但我很高兴以这种方式工作。

所以我要求一些方法来增加偏移量。或者可以添加受＆＃34;边际计算器＆＃34;影响的第一个元素的偏移量。我上面提到过。

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

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);
});

Answer 2

使用此

$（ 'mainh'）。outerHeight（真）

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

2 个答案: