jQuery 'removeClass' не работает на липкой панели навигации

Я работаю над сайтом, для которого требуется липкая панель навигации, которая должна «выскакивать» из заголовка, когда пользователь прокручивает страницу вниз. Затем он должен вернуться к своему исходному положению в заголовке, когда пользователь прокрутит страницу вверх.

Вот JSFiddle.

Моя проблема в том, что мой класс .sticky не удаляется, когда пользователь прокручивает страницу вверх. Я уже изучил другое вопросы относительно jQuery removeClass() не работают, но ни одно из предложенных решений этих вопросов не сработало для мое дело.

Я подумал, не вызывает ли проблема мое условие оператора «если», но при отслеживании числовых значений scrollTop() все кажется правильным. Условие «иначе» определенно выполняется (я проверил это с помощью большего количества журналов консоли), но jQuery removeClass() не работает.

var stickyHeaderOffsetValue = $('#sticky-container').offset().top;
var currentOffsetPosition = $(window).scrollTop();

if (currentOffsetPosition >= stickyHeaderOffsetValue) {
    $('#sticky-container').addClass('sticky');
} else {
    $('#sticky_navigation').removeClass(); // this didn't work
}

jquery css sticky removeclass
person Candlejack    schedule 04.07.2014    source источник
comment
removeClass() ожидает имя класса в качестве параметра, который класс удалить   -  person Ehsan Sajjad    schedule 04.07.2014
comment
Пожалуйста, включите соответствующую часть кода в вопрос.   -  person Felix Kling    schedule 04.07.2014

Ответы (2)


arrow_upward
2
arrow_downward

http://jsfiddle.net/fS3Tr/4/

Несколько вещей, во-первых, вам нужно удерживать «исходное» положение заголовка. Как только это будет исправлено, оно никогда не будет правильно вычисляться.

if (!window.homePosition) window.homePosition = $('#sticky-container').offset().top;

Во-вторых, вы удалили класс из неправильного тега :)

$('#sticky-container').removeClass('sticky');
person PeteAUK    schedule 04.07.2014
comment
Спасибо, это идеально. - person Candlejack; 05.07.2014

arrow_upward
1
arrow_downward

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

Кроме того, removeClass() ожидает удаления имени класса.

stickyHeaderHandler();

// ON WINDOW SCROLL
    $(window).scroll(function(){
        stickyHeaderHandler();
    });

function stickyHeaderHandler() {
    var stickyHeaderOffsetValue = $('#sticky-container').offset().top;
    var currentOffsetPosition = $(window).scrollTop();

    //console.log(currentOffsetPosition + " + " + stickyHeaderOffsetValue);
    if (currentOffsetPosition >= stickyHeaderOffsetValue) {
        $('#sticky-container').addClass('sticky');
    } else {
        // Remove sticky class & Reset the top offset
        $('#sticky_navigation').removeClass('sticky')
                               .offset({ top: "104px", left: offset.left})
    }
}

Вот рабочая скрипка.

person James Hill    schedule 04.07.2014