javascript - HTML CSS 仅当正文到达特定点时固定元素

Question

不确定该方法是什么或它是如何实现的。但我有兴趣了解它，以便在即将进行的元素中使用它。我指的是当 block 元素位于特定的 X/Y 轴时，它似乎不再像固定位置元素一样工作，否则该元素将充当固定位置元素。

我最常在导航中看到这种情况，其中页眉和页脚很大，当元素到达页眉底部或页脚顶部时，该元素将不再充当固定元素

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