はJavaScript：ニード下のdiv（絶対のdivの下）

Question

をスクロールしないように、私は今の私のウェブサイトのレイアウトに問題がある...

レイアウトは私が作ったこのバイオリンに似ています。トップレイヤーにプロジェクトのサムネイルが表示され、ユーザーがサムネイルをクリックすると下部レイヤーにプロジェクトの詳細が表示されます。

問題トップレイヤーのサムネイルをクリックするためにユーザーがスクロールしなければならないということがあります。その後、層がフェードアウトするとき、下のdivはすでにそれをスクロールした - と私はdiv要素のscrollTopスプライトする必要があります（0）の代わりに...私が何を言っているか理解するために私のバイオリンを参照してください

てください：

$('#click').on('click', function(){ 
 
\t $('#topPanel').fadeOut(600); 
 
})

#click { 
 
    padding:10px 15px; 
 
    position:fixed; 
 
    z-index:100; 
 
} 
 

 
#topPanel, #bottomPanel { 
 
    width:80%; 
 
    height:auto; 
 
    margin:0 auto; 
 
    padding:100px; 
 
    text-align:center; 
 
} 
 
#topPanel { 
 
    background:green; 
 
    position:absolute; 
 
    z-index:10; 
 
} 
 
#bottomPanel { 
 
    background:yellow; 
 
    position:absolute; 
 
    z-index:0; 
 
} 
 
#topPanel p, #bottomPanel p { 
 
    padding: 500px 0; 
 
    text-transformation:uppercase; 
 
} 
 
#bottomPanel p:nth-child(odd){ 
 
    background:#555; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="click">CLICK ME TO FADEOUT TOP</button> 
 
<br> 
 
<p>please scroll down and then click button above to see issue</p> 
 

 
<div id="topPanel"> 
 
    <p>top of page</p> 
 
    <p>middle of page</p> 
 
    <p>bottom of page</p> 
 
</div> 
 

 
<div id="bottomPanel"> 
 
    <p>top of page</p> 
 
    <p>middle of page</p> 
 
    <p>bottom of page</p> 
 
</div>

https://jsfiddle.net/reese329/50urkgtm/

Answer 1

問題は、あなたのパネルがスクロールされていないということです：文書全体をスクロールしています！このトリックは、ラッパー要素（または本文）にoverflow: hiddenを設定し、パネル自身をoverflow-y: scrollでスクロール可能にします。 Here is a working example.

パネルの高さを明示的に設定しなければならないことに注意してください（ビューポートを埋めて100vh）。

あなたのtext-transform: uppercaseルール（スタイルはtext-transformで、text-transformationではありません）を修正しました。