У меня проблема с функцией 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');
}
}
});
}
Я думаю, что только CSS может решить эту проблему, добавьте этот стиль:
#menubar{
position: fixed;
}
просто проверьте в Google Chrome, вы можете попробовать.