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之外的值在其中滚动），此时它被视为＆＃34;卡住＆＃34;直到见面其包含块的相对边缘。 Source

一个例子：

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

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

2 个答案: