不确定方法是什么或如何实现。但是我很想知道它可能会在即将到来的项目中使用它。我所指的是当一个块元素位于特定的X / Y轴时,它似乎停止表现为好像它是一个固定的位置元素,否则该元素就像一个固定的位置元素。
我最常见的是导航,页眉和页脚很大,当元素到达页眉底部或页脚顶部时,元素将停止作为固定元素
答案 0 :(得分:4)
你可以这样做,
$(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');
}
}
});
答案 1 :(得分:2)
有插件可以为您完成此操作;这是我以前用过的一个:link相对成功。也有很好的例子。
但如果您想自己动手,那就不难了。这个概念有点复杂;如果您将某些内容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.
});
});
这只是一个基本的代码,但它应该让你走上正轨。
答案 2 :(得分:1)
看看这个插件,或其他类似插件:http://www.orangecoat.com/stickyscroll