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

Question

I made this for i can fix navbar on site when i scroll page

How i can improve this code, can reduce it somehow?

<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

You could use css position: sticky instead and get remove the jquery code

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. Source .

An example:

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

Answer 2

You can just do it as follows with simple if-else block.

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