jQuery的：修复div浏览器滚动时，它
http://knowyourmeme.com/memes/pizza-is-a-vegetable
如果向下滚动，div将locking到浏览器（我假设应用一个position：fixed;属性）
这怎么能用jQuery来实现呢？
你可以在下面find一个例子。 基本上你附加一个函数window的scroll事件和跟踪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
