divを削除しますが、スクロール位置が変更されないようにするにはどうすればよいですか？

Question

私は何をしたいですか？ jquery（scrollTop）を使ってHTMLと本文をdivにスクロールさせるため、表示されていないdiv（CSSの属性ではなくユーザーのために）を削除します。今私はjqueryでスクロールダウンbeforr表示されたdivを削除したい。

編集：.header divを削除した後、#beginingはページの先頭になり、.header divは永久に削除する必要があります。

問題が何ですか？ 私はスクロールし、次のコード行を使ってdivを削除しました：$('.header').css('display','none');スクロール位置が変わります。

divをスクロールダウンして削除するコード。

function scrollToBegining(){ 
     $('html, body').animate({ 
      scrollTop: $("#begining").offset().top 
     }, 750); 

     setTimeout(function(){ 
      $('.header').css('display','none'); 
     },750); 

    } 

可視化問題： GIF of the problem (Watch to understand better)

Answer 1

これは奇妙ですが、私はより良い選択がslideUp div要素の代わりに、スクロールのにあると思う：それはもはやスクロールだから

明らか

function scrollToBegining(){ 
    $('.header').slideUp(750); 
} 

は、機能の名前を変更しません。

Answer 2

あなたはdiv要素を隠しますが、そのスペースを確保するためにvisibility: hiddenを使用することができます。また、display: noneを使用するときに、スクロール位置を変更する必要があることがあります。

Answer 3

visibility: hidden 

は、あなたが探しているが、私はこの種の問題で使用、別の解決策ではなく、2番目のdivにスクロールダウンであり、それが0になるまで、最初のdiv要素が均一なアニメーションで、その高さを縮小しなければならないものです。これは、[はい

Answer 4

document.querySelector('#header h1').addEventListener('click', closeHeader) 
 
function closeHeader(){ 
 
\t document.querySelector('#header').classList.add("hidden"); 
 
}

#header { 
 
    height: 300px; 
 
    width: 100%; 
 
    background: red; 
 
    text-align: center; 
 
} 
 

 
#content { 
 
    height: 1000px; 
 
    width: 100%; 
 
    background: yellow; 
 
    text-align: center; 
 
} 
 

 
.hidden { 
 
    display: none !important; 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
}

<div id="header"> 
 
    <h1> 
 
    HEADER 
 
    </h1> 
 
</div> 
 
<div id="content"> 
 
    CONTENT 
 
</div>