Подскажите как уменьшить блок кода if else в jquery

450
17 мая 2017, 07:45

Всем привет недавно в интернете нашел такой блок кода (маленький)потом увеличил его.Ну теперь смотрю что я не могу добавить в него что та еще таким образом (я не профи в 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");
  }
});
Answer 1

Измени немного разметку 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.

Если скинешь все стили - напишу код и объясню что к чему и почему.

Answer 2
$(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");
    }
});
Answer 3

Я немного доработал решение, которое предложил Oleg Reym. При таком подходе if вообще не нужен. Методу toggleClass вторым значением можно передать true или false, чтобы включить или выключить класс.

$(window).scroll(function(){
  var isScrolled = $(this).scrollTop() > 1;
  $('body').toggleClass('scrolled', isScrolled);
});
READ ALSO
Как сделать диалоговое окно на Javascript, типа alert()?

Как сделать диалоговое окно на Javascript, типа alert()?

Мне нужно сделать диалоговое окно на Javascript, типа alert()Только, чтобы было две кнопки "Да" и "Нет", при нажатии "Да" срабатывает один код, при нажатии...

451
Скрытие Div при нажатии вне его на jQuery

Скрытие Div при нажатии вне его на jQuery

Вопрос в том, что есть кнопка, при нажатии которой toggle DivС помощью следующего кода включил скрытие Div при нажатии вне Div кнопкой мыши:

411
Как осуществить переход по нажатию на кнопку?

Как осуществить переход по нажатию на кнопку?

Всем привет! Вообщем у меня такой вопросУ меня есть таблица в БД где хранится оценка продукта

489