Question

我有一个网站www.bacauacum.ro，我希望在rocketheme主站点http://www.rockettheme.com/上有侧栏（div rightcol），我知道它会改变css样式**<div id="sidebar" **class="top" style="margin-top: 0px;** ">**为你向下滚动它变为<div id="sidebar" class="float" style="margin-top: 0px; ">的页面，当你到达侧栏的底部时它会变成<div id="sidebar" class="bottom" style="margin-top: 0px; ">，我的问题是你需要做什么的javascript代码。

Answer 1

http://sparksm.com/scripts/fixedpanel.html

在jQuery中快速完成。

$(window).scroll(function(){
    var a = $('.header').offset().top+$('.header').height(),
    b = $(this).scrollTop() + $('.right').height(), 
    c = $('.footer').offset().top, 
    d = c - $('.right').height();

    if ( $(this).scrollTop() > a ) {
        $('.right').removeClass('topstop').removeClass('bottomstop');
        $('.right').addClass('scrolling');
    }
    if ( $(this).scrollTop() < a ) {
        $('.right').removeClass('scrolling').removeClass('bottomstop');
        $('.right').addClass('topstop');
    }
    if ( $(this).scrollTop() > d) {
        $('.right').removeClass('topstop').removeClass('scrolling');
        $('.right').addClass('bottomstop');
    }
});

包含多个模块的div基于页面位置的动态定位

1 个答案: