我如何改善此代码（固定的导航栏）？

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