jQuery無限循環滾動

我創建了一個包含內容和側欄的簡單頁面。當用戶滾動時，邊欄會關閉。當側邊欄很小時它的工作原理是正確的，但是當側邊欄很大時，它會無限地下降。jQuery無限循環滾動

我創建了一個演示頁面以獲得更好的解釋。

在第一個例子中，側邊欄小所以它的工作原理正確（http://jsbin.com/ojasuj/2/）

在第二個例子中，邊欄較大，則它會無限下降（http://jsbin.com/ojasuj/）。

我想停止底部的動畫。我正在使用javascript：

jQuery.noConflict(); 

jQuery(document).ready(function() { 
    jQuery(document).scroll(function() { 
     if(jQuery(document).scrollTop() <= (jQuery(document).height() - jQuery(window).height())) { 
      jQuery(".sidebar").stop().animate({"marginTop": (jQuery(document).scrollTop() + 10) + "px"}, "slow"); 
     } else { 
      jQuery(".sidebar").css({'margin-bottom': '100px'}); 
     } 
    }); 
});

我嘗試了幾種方法，但無法解決此問題。我試圖使用一些腳本，但他們也沒有工作。我希望有一個人可以幫助我。

來源

2012-01-04 André Golvea

您應該計算div的高度，而不是文檔的高度，因爲你的側邊欄總是加上「高度」時，它比你的內容大。

爲此幾個細微的變化：

HTML

<div id="content"> 
    <p>all your text etc...</p> 
    <div class="clr"></div> 
</div>

這將使你的內容環繞p標籤和內容ID給予高度。因爲我們不希望它增加高度，所以您的側邊欄應該不在此內容div中。

CSS

.clr {clear:both;}

使內容包...

if(jQuery(document).scrollTop() <= (jQuery("#content").height() - jQuery(window).height() - 150))

希望你不介意我用小提琴爲這一個http://jsfiddle.net/tive/ByNde/因爲jsbin有點慢爲了我。

來源

2012-01-04 16:29:00

謝謝。這解決了我所有的問題。 :) – 2012-01-04 16:38:41

很高興聽到^^ 歡呼聲 – 2012-01-04 18:07:01

我處理這個問題的方法是使用一些JS。我檢查側邊欄的高度是否大於窗口高度。如果是，請禁用邊欄的「浮動」或「移動」，並允許其滾動頁面的其餘部分。

來源

2012-01-04 15:58:28 Dutchie432

如果您有一個不是很小的邊欄，無論如何滾動它都沒有意義。如果用戶想要查看側邊欄底部的內容怎麼辦？他們必須一直滾動到文檔的底部。

但是爲了得到這個工作，你應該檢查主要內容的高度<div>而不是整個文檔的高度（因爲每次滾動時它會變大）。

if ($(document).scrollTop() <= ($('#content').height() - $(window).height()) { 
    $('.sidebar').stop().animate({'marginTop': ($(document).scrollTop() + 10) + 'px'}, 'slow'); 
}

我會建議@ Dutchie432的解決方案：

$(document).ready(function() { 
    if ($('.sidebar').height() < $(window).height()) { 
     // init scrolling scrip here 
    } 
});

來源

2012-01-04 16:04:36

謝謝你的幫助。我希望當我到達頁面的末尾時，滾動「抓住」。然後用戶可以閱讀網站欄底部的內容。看：[鏈接]（http：// jsbin。com/ojasuj/8 /） – 2012-01-04 16:23:04

[這裏你去]（http://jsbin.com/ojasuj/26），底部對齊是有點關閉，但你應該能夠調整。 – 2012-01-04 17:46:25

jQuery無限循環滾動

回答

相關問題