Всем привет недавно в интернете нашел такой блок кода (маленький)потом увеличил его.Ну теперь смотрю что я не могу добавить в него что та еще таким образом (я не профи в Jquery)выглядит отвратительно и не профессионально.Подскажите как можно уменьшить этот код правильно.
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
$('.menu ').addClass("sticky");
$('.blog').addClass("smaller");
$('.fullName').addClass("smaller");
$('.next').addClass("smaller");
$('.surname').addClass("smaller");
$('.menu_right').addClass("normalize");
}
else {
$('.menu').removeClass("sticky");
$('.blog').removeClass("smaller");
$('.fullName').removeClass("smaller");
$('.menu_li').removeClass("smaller");
$('.next').removeClass("smaller");
$('.surname').removeClass("smaller");
$('.menu_right').removeClass("normalize");
}
});
Измени немного разметку css. Т.е. при скролле пишешь
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
$('body').addClass('scrolled'); // Лучше обернуть все дочерние классы в какой-нибудь #container
} else {
$('body').removeClass('scrolled');
}
});
А в css пишешь:
Например, у тебя класс "sticky" имеет position:fixed; - в этом случае пишем:
body.scrolled .sticky { /* Либо же если выше в jQuery у тебя $('#container').addClass('scrolled'); - то в css #container.scrolled .sticky {...} */
position: fixed;
}
Т.е. у тебя есть общий "родитель" для всех элементов, которые должны меняться при скролле, и ты пишешь это все дело просто в css.
Если скинешь все стили - напишу код и объясню что к чему и почему.
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.menu ').addClass("sticky");
$('.menu_right').addClass("normalize");
$('.blog, fullName, next, surname').addClass("smaller");
} else {
$('.menu').removeClass("sticky");
$('.menu_right').removeClass("normalize");
$('.blog, fullName, menu_li, next, surname').removeClass("smaller");
}
});
Я немного доработал решение, которое предложил Oleg Reym. При таком подходе if вообще не нужен. Методу toggleClass вторым значением можно передать true или false, чтобы включить или выключить класс.
$(window).scroll(function(){
var isScrolled = $(this).scrollTop() > 1;
$('body').toggleClass('scrolled', isScrolled);
});
Как развивать веб-проекты в 2026 году: технологии, контент E-E-A-T и факторы доверия
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники