Question

页面上有一个粘滞的navbar，一直显示在屏幕上。当我滚动到页面的下一部分（div）时，它将滚动，因此div从屏幕顶部开始，因此导航栏稍微覆盖了它。

如何从y滚动位置减去导航栏高度？

    $('html, body').animate({
    scrollTop: $("#section2").offset().top // minus the nav height
}, 1000);

还-如何通过一种良好的做法使navbar height可供我的javascript（从css）使用？（全局变量？）

Answer 1

您可以选择导航栏（这里我给导航栏指定了ID nav），并通过以下操作获取其高度：

$("#nav").height();

然后可以从scrollTop属性中减去它。

但是，请注意，如果导航栏具有填充和/或边距，要正确计算高度，您将需要使用与.height不同的方法。如果遇到困难，请参见this答案。

请参见下面的工作示例：

$('html, body').animate({
  scrollTop: $("#section2").offset().top - $("#nav").height() // minus the nav height
}, 1000);

body {
  margin: 0;
}

nav {
  background: black;
  height: 10vh;
  width: 100%;
  position: fixed;
}

section {
  height: 100vh;
}

#section1 {
  background: red;
}

#section2 {
  background: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav"></nav>
<section id="section1">Top</section>
<section id="section2">Top</section>

Answer 2

要知道任何元素的高度：

转到检查器（Ctrl + Shift + i），选择“ nav”元素，然后在右侧单击框模型。这将为您提供所选元素的高度和宽度。

在JavaScript中，获取高度：

$("nav").height();

使用粘性导航栏滚动到div

2 个答案: