HTML CSS 当body到达特定点时，固定元素

Question

不确定这个方法是什么或如何实现。但我有兴趣了解它，可能会在即将到来的项目中使用它。我所指的是当块元素位于特定的X/Y轴时，它似乎停止作为固定位置元素运行，否则该元素就会像固定位置元素一样运行。

我最常见的情况是在导航中看到的，在那里头和尾部很大，当元素到达头部的底部或脚注的顶部时，该元素将停止作为固定元素运行。

- chris

Answer 1

您可以像这样做：

$(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');
        }
    }
});

- Jashwant

Answer 2

有插件可以帮您完成这个任务；这是我之前使用过的一个插件：链接，效果还不错。它还提供了很好的示例。

但是如果您想自己实现，也并不难。这个概念有点复杂；如果您将某个元素的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.
    });
});

这只是一段基础代码，但它应该能让你朝着正确的方向前进。

- Cat

---

啊，JavaScript的概念，我一直以为它是基于CSS/HTML的。这让我对整个问题有了很好的理解。非常酷，谢谢。 - chris

Answer 3

看看这个插件，或者类似的插件：http://www.orangecoat.com/stickyscroll

- BlakeGru