Javascript HTML CSS仅在主体到达特定点时固定元素

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

---

我最常在导航中看到这一点，其中页眉和页脚都很大，当元素到达页眉底部或页脚顶部时，它将不再作为固定元素使用。

看看这个插件，或者其他类似的插件：

有一些插件可以为您这样做；这是我以前用过的：相对来说比较成功。也有很好的例子

但是如果你想自己做的话，这并不难。这个概念有点复杂；如果将某个对象的

位置更改为
固定的
，则它不会像静态的
那样占用空间

当我遇到这个问题时，我在同一个地方创建了第二个项目（或者不创建，取决于您希望它出现的位置），它是不可见的。然后实现加载/滚动事件，检查窗口的
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.
    });
});

这只是一个基本的代码，但它应该会让您走上正确的道路。
您可以这样做

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

啊，基于JavaScript的概念，我一直认为它是基于CSS/HTML的。这使我对整个问题有了深刻的见解。很酷，谢谢。