Исправить верхнюю часть правой колонки после прокрутки до некоторой степени

Я хочу исправить положение "#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');
            }
        }
    });
});
Другие вопросы по тегам