使用粘性導航欄滾動到div

Question

該頁面具有粘性navbar ，該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不同的方法。 如果您遇到困難，請參閱此答案。

請參見下面的工作示例：

 $('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();