Question

我正在一个有侧边栏的网站上工作。侧边栏只会固定在滚动窗口上。

问题是，当我向下滚动窗口并到达页面底部时，侧边栏将与页脚重叠，因为侧边栏已固定。

我希望，当用户到达页面底部时，侧栏会停止滚动，如果用户滚动页面顶部，则应该再次开始滚动。

您可以查看下面的代码，也可以查看 fiddle here 。

SCRIPT

<script>
$(window).scroll(function(){

        var contPos = $('.sidebar').offset().top;       

        var containerHeight = $('.container').height();

        var heightOfWindow = $('body').height();            
        var topOfWindow = $(window).scrollTop();

            if (contPos < topOfWindow) {
                $('.sidebar').css('margin-top',''+topOfWindow+'px');

            }
    }); 


</script>

HTML

<div class="header">Header</div>
<div class="sidebar">asd</div>
<div class="container">Contaier</div>
<div class="footer">Footer</div>

CSS

.header{height:100px; text-align:center; font-size:35px; color:#000; background:#999;}
.container{overflow:auto; padding:15px; background:#CCC; height:1000px; margin:0 0 0 300px;}
.sidebar{width:300px; height:700px; float:left; background:red;}
.footer{height:100px; text-align:center; font-size:35px; color:#000; background:#999;}

Answer 1

我想你必须编写一个JS代码来检测侧边栏是在页面的顶部，底部还是中间。然后你可以设置一个特定的css类“bottom”，“top”，..并在fixed / absolute之间设置正确的位置。

我将如何做到这一点：

http://jsfiddle.net/w6G7Z/1/

Answer 2

在这种情况下，通过提供侧边栏的CSS类position:absolute并设置top属性而不是margin-top

，可以非常轻松地修复初始问题

的CSS：

.sidebar{
    width:300px; 
    height:700px; 
    float:left; 
    background:red;
    position:absolute;
}

的javascript：

if (contPos < topOfWindow) 
{
    $('.sidebar').css('top',topOfWindow+'px');
}

请参阅小提琴here

当向后滚动时，您仍会遇到问题。

当它到达页面底部时停止侧边栏滚动

2 个答案: