JQuery - при прокрутке окна запустить функцию без каких-либо задержек

0

У меня проблема с функцией jquery. Здесь вы можете увидеть рабочую демонстрацию - http://dev.sreejesh.in/menuissue/. Как вы можете видеть, когда пользователь прокручивается до страницы, я написал функцию jQuery (которая будет тригером на свитке), чтобы проверить пиксель прокрутки. Когда браузер прокручивается до определенного пикселя (высота блока sidemenu), блок меню будет оставаться фиксированным и остальным прокрутки контента, как обычно.

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

Я использовал функцию if/else, чтобы проверять пиксель прокрутки, поэтому, когда прокрученный пиксель больше высоты мейблока, он добавит класс "fixed".

Я использую следующий код.

HTML

<div id="globalwrapper">
    <div id="menubar">
       ---- Menu List items-----
    </div>
    <div id="mainblock">
        ----Main content area----
    </div>
</div>

JQuery

$(document).ready(function(){
    $(window).scroll(function() {
       adjustScroll();
    });
});

function adjustScroll(){
    var windowHeight = $(window).height();
    var menublockHeight = $('#menubar').height();
    var scrollValue = $(document).scrollTop();
    var posValue = menublockHeight - windowHeight;

    var menuStatus = $('#menubar').css('left');

    $('#menubar').css('minHeight', windowHeight);
    $('#menubar').css('height', menublockHeight);

    console.log(menuStatus);

    $(document).scroll(function() {
        if(menuStatus == '0px') {
            if(scrollValue > posValue){
                $('#menubar').addClass('fixed');
                $('#menubar').css('marginTop', -posValue);
            }else {
                $('#menubar').removeClass('fixed');
                $('#menubar').css('marginTop', '0px');
            }
        }
    });
}
Теги:
user-interface

1 ответ

0

Я думаю, что только CSS может решить эту проблему, добавьте этот стиль:

#menubar{
    position: fixed;
}

просто проверьте в Google Chrome, вы можете попробовать.

  • 0
    Нет. Я уже использую класс «fixed», который имеет свойство position: fixed. Проблема в том, что jquery делает задержку в применении класса.
  • 0
    Я имею в виду использовать это свойство напрямую, а не через JavaScript
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню