CSS combination of relative+fixed without jump eff

问题:

I want to give to the header-body the effect like in this site preview.oklerthemes.com/?theme=Porto

Use a relative position (to show the scroll)...and the use the fixed.. but when I put the fixed position I see that this come to the original position AND THEN come up. --> https://jsfiddle.net/uxhgpz6e/2/

enter

So, i'd like to avoid this "jump effect", but still use the relative+fixed.

回答1:

Change your scroll value and it should get the behaviour you want : 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');

        }    
});