如果您向下滚动以下网址中的页面,'share'div将锁定到浏览器:
http://knowyourmeme.com/memes/pizza-is-a-vegetable
我假设他们正在应用position: fixed;
属性。如何使用jQuery实现这一目标?
答案 0 :(得分:115)
您可以在下面找到一个示例。基本上,您将函数附加到window
的{{1}}事件和跟踪scroll
属性,如果它高于所需的阈值,则应用scrollTop
和其他一些css属性。
position: fixed
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;
}
答案 1 :(得分:14)
在设计师的jQuery上有一篇关于这个的写得很好的文章,这是jQuery片段,它具有魔力。只需将#comment替换为要浮动的div的选择器。
注意:要查看整篇文章,请访问: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');
}
});
});
答案 2 :(得分:10)
我在这里混合了答案,拿了@Julian的代码和其他人的想法,对我来说似乎更清楚,这就是剩下的:
//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');
}
});
.my-sticky-element.stuck {
position:fixed;
top:0;
box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
答案 3 :(得分:2)
(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();