不确定这个方法是什么或如何实现。但我有兴趣了解它,可能会在即将到来的项目中使用它。我所指的是当块元素位于特定的X/Y轴时,它似乎停止作为固定位置元素运行,否则该元素就会像固定位置元素一样运行。
我最常见的情况是在导航中看到的,在那里头和尾部很大,当元素到达头部的底部或脚注的顶部时,该元素将停止作为固定元素运行。
不确定这个方法是什么或如何实现。但我有兴趣了解它,可能会在即将到来的项目中使用它。我所指的是当块元素位于特定的X/Y轴时,它似乎停止作为固定位置元素运行,否则该元素就会像固定位置元素一样运行。
我最常见的情况是在导航中看到的,在那里头和尾部很大,当元素到达头部的底部或脚注的顶部时,该元素将停止作为固定元素运行。
您可以像这样做:
$(window).scroll(function(){
if ($(this).scrollTop() > 250){
$('#top').css('position','fixed');
}
else{
$('#top').css('position','static');
}
});
$(window).scroll(function(){
var top = $('#top');
if ($(this).scrollTop() > 250){
if(top.css('position') !== 'fixed'){
top.css('position','fixed');
}
}
else{
if(top.css('position') !== 'static'){
top.css('position','static');
}
}
});
position
属性设置为fixed
,那么它就不会占用空间,就像static
一样。scrollTop
是否大于非固定对象的top
坐标。如果是,则显示固定对象。$("#yourObject").each(function() { // The ID should be the FIXED object.
var $me = $(this);
var $heightRival = $("#anotherObject"); // This ID should be the non-fixed object.
$me.hide(); // Hide your fixed div.
$(window).bind("load scroll",function() {
var offset = $heightRival.offset(); // Get the document offset of the base object.
var height = $heightRival.outerHeight(); // Get the height of the base object.
if ($(window).scrollTop() > offset.top+height)
$target.show(); // Can be a fade in, slide in, whatever.
else
$target.hide(); // Can be a fade out, etc.
});
});
这只是一段基础代码,但它应该能让你朝着正确的方向前进。