0

どんな助けでも大歓迎です。

以下は、簡略化されたコード スニペットです。私が抱えている問題は、「ロゴ」クラスが希望どおりに正確に配置されていることです。つまり、ページ/ウィンドウ全体に対して相対的です。そのため、ページを下にスクロールすると、「ロゴ」要素が親要素内でページを下に移動します。

問題は、「ロゴ」要素が「ページ」要素の子であるという事実にもかかわらず、親の「オーバーフロー」を「非表示」に設定しているにもかかわらず、親の境界の外にある場合でも「ロゴ」が常に表示されることです。

CSSで問題を修正する方法を誰かが知っていれば、それは素晴らしく好ましいでしょう。jQuery (JavaScript) もオプションですが、サイトが完了すると JavaScript が非常に重くなることを十分に認識しているため、可能であればこれを避けたいと考えています。

<style>
.page{
    width:100%;
    height:1000px;
    overflow:hidden;
}
.logo{
    position:fixed;
    margin:20px;
}
</style>

<div class="page">
    <div class="logo"></div>
<div>
<div class="page">
    <div class="logo"></div>
<div>
4

2 に答える 2

2

できません。ここから撮影：

固定位置要素はビューポートに対して固定されているため、別の要素ではありません。したがって、ビューポートはそれを遮断していないため、オーバーフローは無関係になります。

要求に応じて、完全に理論的に可能な jQuery ソリューション:

$(window).scroll(function(){
    if($(this).scrollTop()>=1000){
        $('#ItemToHide').hide();
    } else {
        $('#ItemToHide').show();
    }
});

これは非常にずさんで、明らかに改善できますが、このようなものがうまくいくかもしれません。

于 2013-01-17T15:50:03.660 に答える
1

おそらく、絶対的な位置付けが必要です。絶対配置要素は、その親要素に基づいています。したがって、top: 20px のロゴの絶対位置は、ページ要素の上部から 20 ピクセルの位置に配置されます。ウィンドウの上端から 20px の位置に固定します。ただし、絶対配置を機能させるには、ページ要素に少なくとも相対位置が必要です。

http://www.w3schools.com/css/css_positioning.asp

于 2013-01-17T15:48:56.823 に答える