html - CSS组合relative+fixed无跳转效果

Question

我想给header-body 的效果就像这个网站preview.oklerthemes.com/?theme=Porto

使用相对位置(显示滚动)...并使用固定位置...但是当我放置固定位置时，我看到它到达原始位置然后出现。 --> https://jsfiddle.net/uxhgpz6e/2/

输入

所以，我想避免这种“跳跃效应”，但仍然使用相对+固定。

Answer 1

改变你的滚动值，它应该得到你想要的行为:See this fiddle

$(window).scroll(function(){

        if($(window).scrollTop() > 100){
              $('.header-body').css('position','fixed').css('top','-100px');
        } else {
            $('.header-body').css('position','relative').css('top','0');

        }    
});