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 - 防止進入網站頁腳

回答

相關問題