什麼是最簡單的jQuery方式有'位置：固定'（總是在頂部）div？

我對jQuery比較陌生，但到目前爲止我見過的我都喜歡。我想要的是div（或任何元素）跨越頁面頂部，就好像「position：fixed」在每個瀏覽器中都有效。什麼是最簡單的jQuery方式有'位置：固定'（總是在頂部）div？

我不想要複雜的東西。我不想要巨大的CSS黑客。我寧願只是使用jQuery（版本1.2.6）就夠了，但如果我需要jQuery-UI-core，那也沒關係。我嘗試了$（「＃topBar」）。scrollFollow（）;}我試過$（「＃topBar」）。 < - 但速度很慢......我希望某些東西看起來真的修好了。

來源

2008-11-02 Timothy Khouri

我剛試過scrollFollow，它似乎工作出色。並不像蒂莫西所說的那樣，但如果你爲它在頁面上下滑動而感到高興，那就完美了！ – Paul 2010-01-13 13:04:35

使用此HTML：

<div id="myElement" style="position: absolute">This stays at the top</div>

這是您要使用的JavaScript。它將一個事件附加到窗口的滾動並將元素向下移動，直到您滾動爲止。

$(window).scroll(function() { 
    $('#myElement').css('top', $(this).scrollTop() + "px"); 
});

正如下面的評論中指出，它不建議將事件附加到滾動事件 - 當用戶滾動，它激發了很多，並可能導致性能問題。考慮將其與Ben Alman的debounce/throttle插件一起使用以減少開銷。

來源

2008-11-03 05:10:48 nickf

謝謝。這幫了我很多！ – 2010-09-28 02:43:36

將事件直接附加到滾動事件並不是一個好主意。查看jQuery作者：http://stackoverflow.com/questions/257250/what-is-the-simplest-jquery-way-to-have-a-positionfixed-always-at-top-div – neves 2011-01-21 04:16:07

你的意思是：http ：//ejohn.org/blog/learning-from-twitter/ – crizCraig 2011-01-21 07:52:53

美麗！你的解決方案是99％...而不是「this.scrollY」，我用「$（window）.scrollTop（）」。更好的是，這個解決方案只需要jQuery1.2.6庫（不需要額外的庫）。

我特別想要這個版本的原因是因爲這就是目前MVC所附帶的。

下面的代碼：

$(document).ready(function() { 
    $("#topBar").css("position", "absolute"); 
}); 

$(window).scroll(function() { 
    $("#topBar").css("top", $(window).scrollTop() + "px"); 
});

來源

2008-11-03 11:01:00

在一個項目中，我的客戶想在另一個DIV浮動框，所以我用的margin-top的CSS屬性，而不是頂部，以我的浮箱留在它的家長。

來源

2009-08-16 12:58:50

對於那些支持「position：fixed」的瀏覽器，您可以簡單地使用javascript（jQuery）在滾動時將位置更改爲「fixed」。這可以消除使用此處列出的$（window）.scroll（function（））解決方案進行滾動時的跳躍性。

本納德爾說明了這一點在他的教程： Creating A Sometimes-Fixed-Position Element With jQuery

來源

2010-04-01 12:47:13 Schmoove

對於任何人還在尋找在IE 6的簡單的解決方案我創建的處理IE 6位插件：固定的問題，是非常容易使用： http://www.fixedie.com/

我寫了它，試圖模仿belatedpng的簡單性，只需要添加腳本並調用它就可以了。

來源

2010-09-21 02:43:05 tbranyen

HTML/CSS方法

如果您正在尋找不需要太多的JavaScript（和所有隨之而來，如快速滾動事件調用的問題），有可能的選項通過添加包裝<div>和一些樣式獲得相同的行爲。我注意到更加平滑滾動（無元素落後），當我用下面的方法：

JS Fiddle

HTML

<div id="wrapper"> 
    <div id="fixed"> 
    [Fixed Content] 
    </div><!-- /fixed --> 
    <div id="scroller"> 
    [Scrolling Content] 
    </div><!-- /scroller --> 
</div><!-- /wrapper -->

CSS

#wrapper { position: relative; } 
#fixed { position: fixed; top: 0; right: 0; } 
#scroller { height: 100px; overflow: auto; }

//Compensate for the scrollbar (otherwise #fixed will be positioned over it). 
$(function() { 
    //Determine the difference in widths between 
    //the wrapper and the scroller. This value is 
    //the width of the scroll bar (if any). 
    var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth; 

    //Set the right offset 
    $('#fixed').css('right', offset + 'px'); 
});

當然，這種方法可以修改滾動在運行時增加/減少內容的區域（這會導致添加/刪除滾動條）。

來源

2012-07-23 21:36:35

什麼是最簡單的jQuery方式有'位置：固定'（總是在頂部）div？

回答

相關問題