相对+ CSS组合相对固定无跳跃效果 [英] CSS combination of relative+fixed without jump effect

问题描述

我想给标题正文提供类似于这个网站的效果 preview.oklerthemes.com /？theme = Porto

使用相对位置（显示滚动条）...和使用固定的..但是当我把固定的立场我看到，这到了原来的位置，然后出现。 - > https://jsfiddle.net/uxhgpz6e/2/

输入

所以，我想避免这种跳跃效应，但仍然使用relative + fixed。解析方案

改变你的滚动值，它应该得到你想要的行为：看到这个小提琴

 <$如果（$（window）.scrollTop（）> 100）{
 $（'。header-body'），c $ c> $（window）.scroll（function（）{
 
） ）.css（'position'，'fixed'）.css（'top'，' -  100px'）; 
} else {
 $（'。header-body'）。css（'position '，'relative'）.css（'top'，'0'）; 
 
} 
}）; 
  

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.

解决方案

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

        }    
});

这篇关于相对+ CSS组合相对固定无跳跃效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！