jquery滚动div - 防止进入网站页脚

我在我的网站上有一个侧面菜单，我希望始终可见。
要做到这一点，我使用下面的代码示例从该页面：jquery滚动div - 防止进入网站页脚

http://camwebdesign.com/demos/jquery-scrolling-element.html

的问题是，样本不像我的网站有一个巨大的1000像素高度页脚。当用户通过页脚div滚动内容时，侧面菜单与其重叠。有没有办法修改它底部有1000px边界的Jquery代码以防止出现这种情况？

谢谢！

<html> 

<title>Keep element in view while scrolling using JQuery</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=CDN"></script> 
<script> 
    $().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 

     $(window).scroll(function(){    
      $scrollingDiv 
       .stop() 
       .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");   
     }); 
    }); 
</script> 
<div style="float: left; width: 70%"> 

<h1>Keep element in view while scrolling using JQuery</h1>

<div id="scrollingDiv" style="position: absolute; top: 32px; right: 16px; width: 21%; padding: 0% 2% 2% 2%; border: 2px solid red; background-color: #ffeaea;"> 
    <h2>Scrolling Element</h2> 
    Scroll down/up to see me smoothly reposition myself and keep in view.<br /><br /> 

    <em>Smooooooooooooooooooth</em><br /> 

</div> 


<div style="clear:both;"></div> 

<div id="footer" style="width:100%; height:1000px; background:#333; color:#FFF;" > 
<h1>Footer</h1> 





</div>

来源

2011-02-25 Frank

您可以发布您的代码？将更容易帮助你拥有。 – TNC 2011-02-25 22:05:20

当然，只需使用代码更新它，它与问题中的链接几乎相同，但在底部添加了两个div。一个清除两个，然后一个清除页脚。 – Frank 2011-02-25 22:09:03

只是广告if/else子句，您可以检查“$（窗口）.height（） - $ scrollingDiv.offset（）<1000”，或类似的东西 – 2011-02-25 22:10:48

演示

http://jsfiddle.net/NsfwM/

全屏 http://jsfiddle.net/NsfwM/embedded/result/

var $scrollingDiv = $("#scrollingDiv"); 

$(window).scroll(function(){    
    var y = $(this).scrollTop(), 
     maxY = $('#footer').offset().top, 
     scrollHeight = $scrollingDiv.height(); 

    if(y< maxY-scrollHeight){ 
     $scrollingDiv 
     .stop() 
     .animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow");   
    }  
});

而在另一个地方与你30PX偏移 http://jsfiddle.net/NsfwM/1/

来源

2011-02-25 22:18:37 Loktar

这是我所说的正确实现 – 2011-02-25 22:23:07

PIMP !!!!谢谢你，先生！ – Frank 2011-02-25 22:24:07

jquery滚动div - 防止进入网站页脚

回答

相关问题