修复/解除Div滚动

基本上我有4个div（一个横幅，左侧内容，正确的内容和页脚）。横幅和左侧内容div是固定的，而正确的内容和页脚则不是。我想要发生的事情是当页脚的顶部遇到左侧内容div的底部时，它会自行解开并与右侧div一起滚动。修复/解除Div滚动

我设置了我目前在jsfiddle下面的预览。

<div id="banner">BANNER</div> 
<div id="content"> 
    <div id="left">LEFT</div> 
    <div id="right">RIGHT</div> 
</div> 
<div id="footer">FOOTER</div> 

#banner { 
    float: left; 
    width: 100%; 
    height: 100px; 
    background-color: #00ff00; 
    position: fixed; 
} 
#content { 
    height: auto; 
} 
#left { 
    float: left; 
    width: 30%; 
    height: 600px; 
    background-color: #ccc; 
    position: fixed; 
    margin-top: 100px; 
} 
#right { 
    float: right; 
    width: 70%; 
    height: 750px; 
    background-color: #333; 
    margin-top: 100px; 
} 
#footer { 
    clear: both; 
    width: 100%; 
    height: 100px; 
    background-color: #ff0000; 
}

任何帮助将不胜感激！

来源

2013-03-05 Bah-Bee

好，但JS部分完全是空的。我知道你希望我们为你做，但它确实会帮助我们看到你做错了什么 - 指导你 - 建议你。 – 2013-03-05 04:18:41

我分叉的小提琴：http://jsfiddle.net/YK72r/2/

我所做的是叫每个滚动事件的if，使用比特量度数学的找到所需要的高度，改变了使用jQuery的css方法左侧边栏的CSS，然后添加一条else语句以在滚动备份时恢复它。

var scrollHeight; 

$(window).ready(function() { 
    scrollHeight = $('#footer').offset().top - $('#left').height() - $('#left').offset().top; 
}); 

$(window).scroll(function() { 
    if ($(document).scrollTop() >= scrollHeight) { 
     $('#left').css({ 
      'position': 'relative', 
      'margin-top': '350px' 
     }); 
    } else { 
     $('#left').css({ 
      'position': 'fixed', 
      'margin-top': '100px' 
     }); 
    } 
});

请注意，我改变了一些高度，所以请注意CSS的像素值。

来源

2013-03-05 04:43:10

下面是一些常规步骤来做到这一点：

使用JavaScript来获取div和页脚
使用onscroll监听器的像素位置，监听时页脚应该“不固定”
当发生这种情况，使用className一类"fixed"添加到页脚

在你的CSS，你应该广告d：

.fixed { position: fixed; }

使用jQuery也可以使所有这一切变得更容易。

希望有帮助！

来源

2013-03-05 04:19:41

无论如何，我宁愿使用一些“高度数学”和文档'scrollTop' – 2013-03-05 04:21:03

+1（你没有杀死所有的乐趣） – 2013-03-05 04:25:13

试试这个：

$(window).scroll(function() { 
     var ftop = $("#footer").position().top; 
     var lbottom = $("#footer").position().top + $("#left").height(); 

     var scrollTop = $(window).scrollTop(); 
     var diff = ftop - scrollTop; 

     if(diff <= lbottom) 
     $("#left").css("position","static"); 
     else 
     $("#left").css("position","fixed"); 
    });

来源

2013-03-05 05:27:15 web2008

修复/解除Div滚动

回答

相关问题