Почему не фиксируется шапка?

Question

[Влад]

ссылка: _adlab.ee/projects/8gatita

Почему при прокрутке страницы не срабатывает яваскрипт ?? Стиль не дописывается.

<script>
        var wrap = jQuery("#sticker-sticky-wrapper");

        wrap.on("scroll", function(e) {

            if (this.scrollTop > 10) {
                wrap.addClass("fix-search");
            } else {
                wrap.removeClass("fix-search");
            }

        });

    </script>

Comments

[Ankhena]

Консоль что говорит?

[Сергей delphinpro]

wrap.toggleClass("fix-search", this.scrollTop > 10);

- так короче будет =)
По вопросу - событие нужно ловить на window, а не на элементе

[Влад]

не работает, и ошибки не выдает консоль:

var wrap = jQuery("#sticker-sticky-wrapper");

jQuery(window).on('scroll', function() {

if (this.scrollTop > 10) {
wrap.toggleClass("fix-search", this.scrollTop > 10);
} else {
wrap.removeClass("fix-search");
}

});

Answer 1

[mletov]

Может вам вообще js не нужен, а достаточно просто position:fixed в css?

$(function() {

    var wrap = $("#sticker-sticky-wrapper");

        $(window).on('scroll', function() {			
            if ($(document).scrollTop() > 10) {
                wrap.addClass("fix-search");
            } else {
                wrap.removeClass("fix-search");
            }

        });
});

Comments

[Влад]

нужен. я хочу фиксировать не самую верхнюю часть шапки

[mletov]

А какую? меню?

[Влад]

да, #sticker-sticky-wrapper

[mletov]

Скрипт надо обернуть, jquery ж, https://learn.jquery.com/using-jquery-core/documen...

[mletov]

Поправил ответ

[Влад]

обернул в $( document ).ready(function() { - не помогло

[Влад]

вставил ваш последний вариант - не помогло

[mletov]

Влад: Еще раз поправил, и проверьте, точно ли определен класс fix-search

[Влад]

теперь заработало! вот только баг какой-то... впервые такое вижу.. Дописал стиль

.fix-search {
position: fixed;
top: 0;
}

после чего перестала работать прокрутка страницы!! Посмотрите, чтото прыгает и не даёт ниже пролистать..

[Влад]

Разобрался.
Почему-то после прокрутке более указанной высоты почему-то срабатывает условие else и добавленный класс пропадает.
То есть scrolltop становится 10 - стиль добавляется.
А как scroll top становится 11, то стиль сразу пропадает..
Не понял почему так происходит..

Исправил ситуацию такой записью

if ($(document).scrollTop() > 140)
wrap.addClass("fix-search");
if ($(document).scrollTop() < 140)
wrap.removeClass("fix-search");

[Влад]

Ясно. Это был баг верстки. Мой косяк. Ваш код рабботает! Спасибо огромное!

[mletov]

Пожалуйста)

Answer 2

[Егор Живагин]

По ссылке нечему скроллится
И из вопроса мало что понятно, но может так:

var wrap = $("#sticker-sticky-wrapper");

        window.on("scroll", function(e) {

            if (this.scrollTop > 10) {
                wrap.addClass("fix-search");
            } else {
                wrap.removeClass("fix-search");
            }

        });

И в функцию можно е не передавать

Comments

[Влад]

я ведь могу вместо $ прописывать jQuery ?

[Влад]

такой вариант не работает..

var wrap = jQuery("#sticker-sticky-wrapper");

window.on("scroll", function(e) {

if (this.scrollTop > 10) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

[Егор Живагин]

Я просто приведу свой код для аналогичной задачи, потому что без jsfiddle/codepen ничего конкретнее не скажу)

$(window).scroll( function () {
var scrolled = $(window).scrollTop();
if ( scrolled >= 130 ) {
$('.head .navbar').addClass('navbar-scrolling');
} else {
$('.head .navbar').removeClass('navbar-scrolling');
}
} )