Как более оптимизированно можно написать данный код?

Question

[Дмитрий]

Помогите, пожалуйста, как данный код можно уменьшить и более грамотно написать!?

$(document).ready(function () {

    var $menu = $("#menu");
    var $scroll = '128'; 

    if ($(this).scrollTop() > $scroll) {
        $($menu).addClass('fixed');
        $($menu).removeClass('default');
    }

    $(window).scroll(function(){
        if ( $(this).scrollTop() > $scroll && $menu.hasClass("default") ){
            $menu.removeClass("default").addClass("fixed");
        } else if($(this).scrollTop() <= $scroll && $menu.hasClass("fixed")) {
            $menu.removeClass("fixed").addClass("default");
        }
    });
});

Comments

[Дмитрий Кузнецов]

А что везде знаки "$" стоят?

[Георгий Еремеев]

Если ваше меню не изменяет свой вид при фиксировании возможно вам просто нужен position: sticky; https://developer.mozilla.org/ru/docs/Web/CSS/position

Answer 1

[Сергей delphinpro]

const menu = document.getElementById('menu');
const scroll = 128;
function toggleFixedMenu() {
  menu.classList.toggle('fixed', window.pageYOffset > scroll);
  menu.classList.toggle('default', window.pageYOffset <= scroll);
}
window.addEventListener('scroll', toggleFixedMenu);
toggleFixedMenu();

Answer 2

[Дмитрий Кузнецов]

1. Вы уже установили #menu в переменную, тогда зачем же её опять вызываете в изменении классов.
2. Если часто берёте значение $(this).scrollTop(), то лучше её поместить в переменную и вызывать собственно саму переменную.
3. Почему все переменные начинаются у вас с "$"? Вы с PHP пришли что ли?
4. Перейдите на ванильный JS.

Comments

[Everybody_Lies]

3. Почему все переменные начинаются у вас с "$"? Вы с PHP пришли что ли?

PHP программисты настолько жадные, что везде ставят знак доллар (с)

[Дмитрий Кузнецов]

Everybody_Lies, тут дело в авторе данного вопроса, а не в "жадности" PHP разработчиков. Он, по всей видимости, новичок. Особенно в JS.

[Everybody_Lies]

Дмитрий Кузнецов, это была всего лишь шутка...

[Дмитрий Кузнецов]

Everybody_Lies, я уж понял)

[inkShio]

В принципе разницы нету, что с баксом, что без него. Просто бакс добавляли в переменную, что бы было понятно, что она содержит jQuery объект.

[Дмитрий Кузнецов]

inkShio, такое себе решение конечно, так как практически весь код написал на JQ.