我如何改善此代碼（固定的導航欄）？

Question

我這樣做是因為我可以在滾動頁面時在網站上修復導航欄

我如何改善此代碼，可以以某種方式減少它？

<nav class="main_menu">
// some code...
</nav>

var menu_offset_top_default = $('.main_menu').offset().top;
$(window).scroll(function() {
    var menu_offset_top = $('.main_menu').offset().top;
    if ($(window).scrollTop() >= menu_offset_top) {
        $('.main_menu').addClass('fixed-top');
    }
    if ($(window).scrollTop() < menu_offset_top_default || $(window).scrollTop() <= 0) {
        $('.main_menu').removeClass('fixed-top');
    }
});

Answer 1

您可以使用css position: sticky代替，然后刪除jquery代碼

粘性放置的元素是其計算的位置值為粘性的元素。 它被視為相對定位，直到其包含的塊在其流根（或在其中滾動的容器）內超過指定的閾值（例如，將top設置為auto以外的值），在該點處將其視為“卡住”，直到達到其包含塊的相對邊緣。 來源 。

一個例子：

https://codepen.io/simevidas/pen/JbdJRZ

Answer 2

您可以使用簡單的if-else塊按如下方式進行操作。

$(window).scroll(function() {
    if ($(window).scrollTop() >= $('.main_menu').offset().top) {
        $('.main_menu').addClass('fixed-top');
    }
    else {
        $('.main_menu').removeClass('fixed-top');
    }
});