Javascript-форум - Присвоение класса при скроле

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Присвоение класса при скроле (https://javascript.ru/forum/jquery/56732-prisvoenie-klassa-pri-skrole.html)

Присвоение класса при скроле

Здравствуйте, подскажите пожалуйста, не пойму почему не работает.
Вообще сделал всплывающие меню с анимацией css , при присвоении класса всплывает, при присвоении другого класса уезжает вверх, сначала сделал так

jQuery(function (f) {
      f(window).scroll(function () {
      f('#hide-navbar-header')[(f(this).scrollTop() > 180 ? "add" : "remove") + "Class"]("hide-navbar-header_fixed");
     f('#hide-navbar-header')[(f(this).scrollTop() < 180 ? "add" : "remove") + "Class"]("hide-navbar-header_hide");
      });
    });

Все присваивает, но получается что при первой прокрутке появляется анимация исчезновения ещё до того как оно всплыло, задача состоит в том чтобы он присваивал класс только после того как оно всплыло в первый раз, все облазил, перечитал получилось вот это

script>
    jQuery(function (f) {
      f(window).scroll(function () {
      if (f('#hide-navbar-header')[(f(this).scrollTop() > 180  )]){
                f('#hide-navbar-header').addClass("hide-navbar-header_fixed");
	  } else if(f('#hide-navbar-header')[(f(this).scrollTop() <= 180 && f('#hide-navbar-header').hasClass("hide-navbar-header_fixed"))]) {
               f('#hide-navbar-header').removeClass("hide-navbar-header_fixed").addClass("hide-navbar-header_hide");
            }
      });
    });
 
  </script>

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

pistachio,
зачем убирать/добавлять класс hide-navbar-header_hide ? пусть будет постоянно
.hide-navbar-header_hide -- элемент скрыт
.hide-navbar-header_hide.hide-navbar-header_fixed - видно

спасибо, получилось, пришлось поиграть со свойством transition
хотелось бы конечно в скрипте разобраться, думаю в будущем мог бы пригодится, и для себя понять в чем ошибка

pistachio,
может так изначально нужно было

jQuery(function(f) {
    f(window).scroll(function() {
        f('#hide-navbar-header')[(f(this).scrollTop() > 180 ? "add" : "remove") + "Class"]("hide-navbar-header_fixed")
            .[(f(this).scrollTop() > 180 ? "remove" : "add") + "Class"]("hide-navbar-header_hide");
    });
});

Цитата:

Сообщение от рони (Сообщение 377304)

pistachio,
может так изначально нужно было

jQuery(function(f) {
    f(window).scroll(function() {
        f('#hide-navbar-header')[(f(this).scrollTop() > 180 ? "add" : "remove") + "Class"]("hide-navbar-header_fixed")
            .[(f(this).scrollTop() > 180 ? "remove" : "add") + "Class"]("hide-navbar-header_hide");
    });
});

Как работает этот сатанинский код? Минут пять втыкаю, не могу понять :cray:
f это псевдоним jQuery, понятно. Вот эта строка что делает?:

f('#hide-navbar-header')[(f(this).scrollTop() > 180 ? "add" : "remove") + "Class"]("hide-navbar-header_fixed")

Тернарный оператор преобразуется в "add" или "remove", получаем примерно это:

f('#hide-navbar-header')["addClass"]("hide-navbar-header_fixed")

Это такое вырвиглазное обращение к методу коллекции jQuery? Кто-нибудь пояснит мне, зачем так делать?

Sigizmund2012,
так проще и короче, предложите свой вариант если этот не устраивает.

Цитата:

Сообщение от рони

предложите свой вариант если этот не устраивает

Предложение в стиле К.О.:

jQuery(function(f) {
    f(window).scroll(function() {
      var navbar = f('#hide-navbar-header');
      if (f(this).scrollTop() > 180) {
        navbar.addClass("hide-navbar-header_fixed").removeClass("hide-navbar-header_hide");
      }
      else{
        navbar.removeClass("hide-navbar-header_fixed").addClass("hide-navbar-header_hide");
      }
      });
});

Кода чуть больше, но читается он гораздо легче.

Sigizmund2012,
ок!