2017-08-24 6 views
0

私は自分のサイトを反応させるようにしていますが、どれだけスクロールしても同じdiv要素になります。jquery-momentum-scroll.jsというプラグインを使用しています全体をカバーするプラグインと呼ばれるvide.js.TheラッパーはAndroid携帯でスクロールすると動作しない

#main { 
    height: inherit; 
    bottom: 0px; 
    transition: transform 1.2s ease-out; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    padding: 0px; 
    z-index: 2; 
    display: block; 
    backface-visibility: hidden; 
}` 

below-私は削除しようとしている

#banner_wrapper { 
    margin-top: 55px; 
    width: 100%; 
    height: 900px; 
    position: relative; 
    top: 0; 
    left: 0; 
    opacity: 0.4; 
    z-index: 0; 
} 

below-与えられているスクロールどんなにを見せている要素を与えています」ポジション:固定;プロパティそれでも、私はそれがサイトのfine.Theリンクは

https://robustious-methods.000webhostapp.com/

答えて

0

below- #mainセクションでは、ビューポートの上に取っている理由を与えていることを示す、ブラウザのサイズを変更するときtrick.Butをしなかったこと要素の配置にposition: fixed;を使用しているためです。

position: fixedでは、これはドキュメントの流れから要素を取り除き、画面に対してそれを固定します。この場合、幅の100%を占めるように設定し、スタイリングでtop: 0; bottom: 0;を使用すると、高さの100%も占めるようになります。

文書のフローに要素を保持する場合は、#mainセレクタでposition: fixedposition: relative;に変更するか、完全に削除します。

フルハイトバナーを維持する場合は、#banner_wrapperセレクタでheight: 900px;を削除し、height: 100vh;を追加してください。

CSSの配置に関する詳細は、hereを参照してください。

+0

位置を固定から相対に変更する、または位置を指定しないことは、プラグインとcssの両方をクラッシュさせます。 –

関連する問題