使用jQuery在可見窗口內保持滾動對象

當我意識到「如何詢問/格式化」邊欄框在這個非常相同的「問題」時，我正在寫一篇關於我想做什麼的長描述一個問題「頁面確實正好我想要的。使用jQuery在可見窗口內保持滾動對象

基本上，它與屏幕其餘部分一致地上下滾動，與主部分保持頂部對齊，除非主部分開始從可見窗口的頂部滾動。此時，側邊欄框會停止滾動，並開始充當其絕對位置，就像可見窗口的頂部一樣。

我已經嘗試在這個「Ask」屏幕上挖掘源代碼和腳本，但有太多的事情發生，這幾乎是不可能的（對我來說，至少）。我假設jQuery實際上使這種事情非常簡單，但我對它很陌生，所以我很難爲自己找出答案。（如果這是一個常見問題，我的歉意 - 我一直在尋找大約一個小時，但有所以許多措辭嚴密的jQuery問題，我一直無法挖掘答案）

在此先感謝您的幫助。

來源

2011-03-11 Laurent Stanevich

這是Apple在Applestore頁面上購物車的示例。

邏輯：

檢查使粘合元件是在滾動事件其中頂部窗口是
添加或刪除CSS類到粘元件

檢查

jQuery：

$(document).ready(function() { 
// check where the shoppingcart-div is 
var offset = $('#shopping-cart').offset(); 

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); // check the visible top of the browser 

    if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed'); 
    else $('#shopping-cart').removeClass('fixed'); 
    }); 
});

的CSS：

.fixed { 
     position: fixed; 
     top: 20px; 
     margin-left: 720px; 
     background-color: #0f0 ! important; }

example Link

來源

2011-03-11 13:39:14 michelgotta

這是一個很好的，光滑的做法。 +1 – Dutchie432 2011-03-11 13:50:00

它不像荷蘭人那樣「彈跳」，但它確實是「Ask」網站上的框。 – michelgotta 2011-03-11 13:58:55

如果您不需要「粘性」或「反彈」效果，這實際上可能比我的方法更好。在某些情況下，我的方法會導致閃爍。見http://jsfiddle.net/Jaybles/C5yWu/4/ – Dutchie432 2011-03-11 16:15:30

這裏是一個小片段我剛掀起了保持一個物體在屏幕上滾動時。

現場演示

http://jsfiddle.net/Jaybles/C5yWu/

HTML

<div id='object'>Top: 0px</div>

CSS

#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}

jQuery的

$(window).scroll(function(){ 
    var objectTop = $('#object').position().top; 
    var objectHeight = $('#object').outerHeight();  
    var windowScrollTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 

    if (windowScrollTop > objectTop) 
     $('#object').css('top', windowScrollTop); 
    else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight)) 
     $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);   

    $('#object').html('Top: ' + $('#object').position().top + 'px'); 

});

更新了例（與定時器+動畫）

http://jsfiddle.net/Jaybles/C5yWu/2/

來源

2011-03-11 13:47:31 Dutchie432

WHOA！這正是我正在尋找的 - 顯然非常好的呈現。非常感謝！ – 2011-03-11 15:48:15

我欣賞客氣話。快樂的編碼！ – Dutchie432 2011-03-11 16:13:29

如果你需要保持它在底部用的，因爲這 jQuery的

$(document).scroll(function() { 
    var objectTop = $('#shopping-cart').position().top; 
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 

    if((objectTop+objectHeight) <= $('html').outerHeight()) 
     $('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight); 
    else 
     $('#'+cont).css('top', $('html').outerHeight()- objectHeight); 
});

級的CSS

#shopping-cart{ 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
}

如果你需要保持它在上面使用，因爲這 jQuery的

$(document).scroll(function() { 
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 

    $('#shopping-cart').css('top', windowScrollTop); 

});

的CSS

#shopping-cart{ 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
}

它會做魔術和不忘記保持你的風格位置和一件事它不工作與Internet Explorer 8.0.7

來源

2012-12-31 05:56:22

而且，如果你只需要在瀏覽器的某個地方舉行div，你不需要JavaScript，你可以用CSS做到這一點。

#chatt-box { 
    right: 5px; 
    height: auto; 
    width: 300px; 
    position: fixed; 
    bottom: 0px; 
}

來源

2013-02-12 07:17:59

使用jQuery在可見窗口內保持滾動對象

回答

相關問題