透明な静的ヘッダーは、スクロールするときにヘッダーの下にテキストが表示されないようにしたいと考えています

Question

私はCSSの初心者です。私のコンテンツが表示されないように問題を解決できるかどうかを試してみました私の透明なヘッダーの下にスクロールする必要があるとき。私は次の記事をチェックしたが、私はこの仕事をすることはできない。可能であれば、私がこれを指導することができれば、私は嬉しく思っています。何か助けがあれば私の問題の視覚を付けました。 wwwはwww.portaponte.comです。事前に感謝します！

Hide scrollable content behind transparent fixed position divs when scrolling the page?

Answer 1

まあ、完璧ではないが、私は答えを行くよ：

この解決策で問題があると、あなたが文句を言わないことができることを意味し、スクロール可能なコンテンツをホバリング時にのみ機能しますスクロールマウスが大きなテキストコンテナの外にある場合はスクロールします。

<div id="casing-wrapper"> 
    <div id="casing"> 
    lots of content here... 
    </div> 
</div> 

はその後あなたがこの新しいのスタイルをする必要があります：このような何かを得る、すべての

まず、#casing-wrapperのdivに#casingのdivをラップ：言われていることを、私はあなたが考えていた厥DIVこの方法：

#casing-wrapper { 
    width: 800px; 
    position: fixed; 
    left: 50%; 
    margin-left: -400px; 
    top: 90px; 
    overflow-y: scroll; 
} 

また、あなたは、ウィンドウの高さに応じて#casing-wrapperの高さを設定するためにいくつかのjQueryを追加する必要があります。

jQuery(document).ready(function(){ 
    setWrapperHeight(); 
    jQuery(window).resize(function(){ 
    setWrapperHeight(); 
    }); 
}); 

function setWrapperHeight() { 
    var height = jQuery(window).height(); 
    var margin = 90; 
    jQuery("#casing-wrapper").css({"height":height - margin}); 
} 

これだけです。これで、ウィンドウの高さから90ピクセルを引いたスクロール可能なコンテンツを含む新しいレイヤーを作成しました。それらの90pxはヘッダーの高さから来ていますが、それは上端です。ラッパーにはposition: fixedがあるため、スクロールでは移動しませんが、内容はそのままです。さらに、overflow-y: hidden;プロパティでは、オーバーフローしたコンテンツがクリップされ、ヘッダーの下にテキストが表示されなくなります。

とにかく、私の意見では、文字をさせるの結果は、ヘッダーの下に行くことはクールだ、と私はそれを変更しません：P私は推測