Исправить верхнюю часть правой колонки после прокрутки до некоторой степени
Я хочу исправить положение "#rightPanelscrl", когда я смогу увидеть последнюю его часть. Я использую приведенный ниже код, и он работает правильно в FF и совсем не работает в Chrome.. Может кто-нибудь меня, пожалуйста..!
var sidebarScrollTop = 0;
$(window).load(function () {
sidebarScrollTop = $("#rightPanelscrl").offset();
if ($("#rightPanelscrl").height() > 500) {
alert($("#rightPanelscrl").height());
$(window).scroll(function () {
var docScrollTop = $('body,html').scrollTop();
// alert(docScrollTop);
if (docScrollTop > 500) {
$("#rightPanelscrl").css({ position: 'fixed', top: '-500px' });
}
else {
$("#rightPanelscrl").css({ position: 'static' });
}
});
}
else if ($("#rightPanelscrl").height() < 500) {
$("#rightPanelscrl").css({ position: 'fixed', top: '35px' });
}
});
$(window).resize(function () {
sidebarScrollTop = $("#rightPanelscrl").offset().top;
});
$(document).resize(function () {
sidebarScrollTop = $("#rightPanelscrl").offset().top;
});
1 ответ
Я предпочитаю делать это, добавляя CSS-класс в определенной точке прокрутки, а не используя jQuery для изменения позиционирования. Это делает код намного проще! Проверьте это.
По сути, у вас есть #rightPanelscrl
<ul id="rightPanelscrl">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>
ваш CSS:
body {height: 2000px;}
#rightPanelscrl {
position:absolute;
top:140px;
z-index:4;
width:100%;
}
#rightPanelscrl.fixed {
position:fixed;
top:0px;
}
и ваш JQuery:
$(document).ready(function() {
var theLoc = $('#rightPanelscrl').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('#rightPanelscrl').hasClass('fixed')) {
$('#rightPanelscrl').removeClass('fixed');
}
} else {
if(!$('#rightPanelscrl').hasClass('fixed')) {
$('#rightPanelscrl').addClass('fixed');
}
}
});
});