要素を相対位置から固定位置に移動する際のコンテンツジャンプを防ぐ方法

Question

ジャンプを防止し、スムーズにコンテンツの位置を変更する方法を知りたいと思います。私はフィドルを作ったhere。 top-barが消え、headerがcontent要素に位置fixedを取得しますが、それは助けにはならなかったときに私は、top-barのheightのmargin-topを追加して試してみました

<div id="top-bar"> 
    <p> 
    Top bar 
    </p> 
</div> 
<div id="header"> 
    <p> 
    Header 
    </p> 
</div> 
<div id="content"> 
    <p> 
    Content 
    </p> 
</div> 

：私は3つの要素を作成しました。コンテンツを飛び越さずにこれをスムーズにするにはどうすればよいですか？

Answer 1

あなたが削除するものを追加する必要があるとして、あなたは、単に、ヘッダ（100pxに）のheightなくトップバーとmargin-top同じ値の値を作ることができます。

const header = document.querySelector('#header'); 
 
const content = document.querySelector('#content'); 
 
const rect = header.getBoundingClientRect(); 
 
const scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
 
const headerTop = rect.top + scrollTop; 
 

 
window.addEventListener('scroll', function() { 
 
    if (window.scrollY > headerTop) { 
 
    header.classList.add('fixed'); 
 
    content.classList.add('margin-top'); 
 
    } else { 
 
    header.classList.remove('fixed'); 
 
    content.classList.remove('margin-top'); 
 
    } 
 
});

body,html { 
 
margin:0; 
 
} 
 

 
#top-bar { 
 
    height: 40px; 
 
    background: red; 
 
} 
 

 
#header { 
 
    height: 100px; 
 
    background: black; 
 
    position: relative; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
#content { 
 
    height: 900px; 
 
    background: blue; 
 
    padding-top: 150px; 
 
} 
 

 
.fixed { 
 
    position: fixed!important; 
 
} 
 

 
.margin-top { 
 
    margin-top: 100px; 
 
} 
 

 
p { 
 
    color: white; 
 
} 
 

 
#top-bar p,#header p { 
 
margin:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="top-bar"> 
 
    <p> 
 
    Top bar 
 
    </p> 
 
</div> 
 
<div id="header"> 
 
    <p> 
 
    Header 
 
    </p> 
 
</div> 
 
<div id="content"> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
    <p> 
 
    Content 
 
    </p> 
 
</div>

Answer 2

あなたのマージントップクラスは40ピクセルのマージンと、あなたのヘッダが100pxに高く、持っていたので、あなたの解決の問題でした。ヘッダーの高さに合わせて余白を変更することもできます。

だけで、ヘッダと同じ高さを持つラッパーでヘッダを包む、最も簡単な方法で行くことにhttps://jsfiddle.net/8q6rbzj7/35/

.margin-top { 
    margin-top: 100px; 
} 

ベストを参照してください。

https://jsfiddle.net/8q6rbzj7/33/

<div class="header-container"> 
    <div id="header"> 
    <p> 
     Header 
    </p> 
    </div> 
</div> 

CSSあなたは、私が40ピクセルを追加した理由、の高さであるマージントップ事

window.addEventListener('scroll', function() { 
    if (window.scrollY > headerTop) { 
    header.classList.add('fixed'); 

    } else { 
    header.classList.remove('fixed'); 

    } 
});