代码之家 › 专栏 › 技术社区 › Curnelious

使用粘性导航栏滚动至div

css html javascript

Curnelious · 技术社区 · 7 年前

这一页有一个黏糊糊的标签 navbar 当我滚动到下一节时( div

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

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

还有-如何制作 导航栏 height 我的javascript(来自css)是否可以使用良好的实践?(全球风险值?)

2 回复 | 直到 7 年前

Nick Parsons Felix Kling 7 年前

你可以选择你的导航栏(这里我给了我的导航栏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>