jQuery的:修复div浏览器滚动时,它

http://knowyourmeme.com/memes/pizza-is-a-vegetable

如果向下滚动,div将locking到浏览器(我假设应用一个position:fixed;属性)

这怎么能用jQuery来实现呢?

你可以在下面find一个例子。 基本上你附加一个函数windowscroll事件和跟踪scrollTop属性,如果它高于所需的阈值你应用position: fixed和一些其他的CSS属性。

 jQuery(function($) { function fixDiv() { var $cache = $('#getFixed'); if ($(window).scrollTop() > 100) $cache.css({ 'position': 'fixed', 'top': '10px' }); else $cache.css({ 'position': 'relative', 'top': 'auto' }); } $(window).scroll(fixDiv); fixDiv(); }); 
 body { height: 2000px; padding-top: 100px; } #getFixed { color: #c00; font: bold 15px arial; padding: 10px; margin: 10px; border: 1px solid #c00; width: 200px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="getFixed">This div is going to be fixed</div> 

在devise人员的jQuery上有一个关于这个写得很好的文章,这是jQuery的片段,这是神奇的。 只要用你想浮动的div的select器replace#comment即可。

注意:要看到整篇文章去这里: http : //jqueryfordesigners.com/fixed-floating-elements/

 $(document).ready(function () { var $obj = $('#comment'); var top = $obj.offset().top - parseFloat($obj.css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y >= top) { // if so, ad the fixed class $obj.addClass('fixed'); } else { // otherwise remove it $obj.removeClass('fixed'); } }); }); 

我在这里把答案混合在一起,把@ Julian的代码和其他人的想法看得更清楚,这就剩下了:

小提琴 http://jsfiddle.net/wq2Ej/

jQuery的

 //store the element var $cache = $('.my-sticky-element'); //store the initial position of the element var vTop = $cache.offset().top - parseFloat($cache.css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y >= vTop) { // if so, ad the fixed class $cache.addClass('stuck'); } else { // otherwise remove it $cache.removeClass('stuck'); } }); 

CSS:

 .my-sticky-element.stuck { position:fixed; top:0; box-shadow:0 2px 4px rgba(0, 0, 0, .3); } 
 (function($) { var triggers = []; $.fn.floatingFixed = function(options) { options = $.extend({}, $.floatingFixed.defaults, options); var r = $(this).each(function() { var $this = $(this), pos = $this.position(); pos.position = $this.css("position"); $this.data("floatingFixedOrig", pos); $this.data("floatingFixedOptions", options); triggers.push($this); }); windowScroll(); return r; }; $.floatingFixed = $.fn.floatingFixed; $.floatingFixed.defaults = { padding: 0 }; var $window = $(window); var windowScroll = function() { if(triggers.length === 0) { return; } var scrollY = $window.scrollTop(); for(var i = 0; i < triggers.length; i++) { var t = triggers[i], opt = t.data("floatingFixedOptions"); if(!t.data("isFloating")) { var off = t.offset(); t.data("floatingFixedTop", off.top); t.data("floatingFixedLeft", off.left); } var top = top = t.data("floatingFixedTop"); if(top < scrollY + opt.padding && !t.data("isFloating")) { t.css({position: 'fixed', top: opt.padding, left: t.data("floatingFixedLeft"), width: t.width() }).data("isFloating", true); } else if(top >= scrollY + opt.padding && t.data("isFloating")) { var pos = t.data("floatingFixedOrig"); t.css(pos).data("isFloating", false); } } }; $window.scroll(windowScroll).resize(windowScroll); })(jQuery); 

然后通过调用使任何div浮动固定

 $('#id of the div').floatingFixed(); 

来源: https : //github.com/cheald/floatingFixed