Блог

Главная - Вопросы по программированию - Jquery изменение свойств класса

Jquery изменение свойств класса

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я пытаюсь создать панель инструментов, которая фиксируется в верхней части моей веб-страницы, когда страница прокручивается вниз, а заголовок над панелью инструментов не отображается. Однако панель инструментов, похоже, остается установленной в абсолютном положении независимо от прокрутки. Возможно, где-то в этом коде есть проблема, которую я не вижу?

 $(window).scroll(function() 
{
    if (isVisible($('.header-box'))) 
    {
        $('.toolbar').css({'position': 'absolute','top': '25%'});
    } 
    else 
    {
        $('.toolbar').css({'position': 'fixed','top': '0%'});
    }
});

function isVisible(elm) 
{
    var windowHeight = $(window).height(),
    pageTop = $(window).scrollTop(),
    Y = $(elm).offset().top,
    elementHeight = $(elm).height();

    return ((Y < (windowHeight   pageTop)) amp;amp; (Y > (pageTop - elementHeight)));
}

Комментарии:

1. Вы вызываете checkVisible() , но функция, похоже, вызывается isVisible() .

2. отредактировано, все еще не работает, но спасибо, что заметили эту часть.

3. isVisible(elm) функция принимает вызываемый объект jquery elm , поэтому вам не нужно помещать его в функцию jquery в строках 3 и 4 в той же функции

4. @user3788161 сделай скрипку

Ответ №1:

посмотрите на это:

 $( window ) . scroll ( function () 
{
    var header = $( ".header-box" );
    var toolbar = $( ".toolbar" );
    if ( $( window ) . scrollTop () > header . offset ().top   header . height () ) { toolbar . css ( { "position": "fixed" } ); }
    else { toolbar . css ( { "position": "relative" } ); }
});

Полный пример находится в этой скрипке: JSfiddle

Я надеюсь, что это вам поможет.