2

2つのフルスクリーンdivを積み重ねたサイトを作成しました。最初のdivをクリックすると、アンカーリンクとjQueryを使用して、2番目のフルスクリーンdivへのスムーズなスクロールダウンを作成しました。

両方のdivには次のcss属性があります。

position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;

display: -webkit-box;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;

これらは、次のcss属性を持つコンテナdivによってカプセル化されます。

position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

体にはオーバーフローがあります：隠されています。また、logo-divにはcss属性がまったくありません。

すべてがうまく機能しますが、2番目のdivに移動して、ブラウザウィンドウの高さのサイズを変更すると、問題が発生します。次に、2番目のdivのフルスクリーンモードが誤って表示され、最初のdivが表示されます。

あなたはここでサイトを見ることができます： http ：//www.nolovelost.nu/test

これを修正する方法に関するヒントをいただければ幸いです。

4

2 に答える 2

1

私はそれが正常に機能していると信じています！

両方のdivの高さは100％です。ウィンドウのサイズをxピクセル増やすと、上部と下部の両方のdivの高さが xピクセル増えます...そして、下部のdivを「押し下げ」ます。

私はjqueryの専門家ではありません...しかし、一番下のdivでトリックを実行する必要がある場合は、このようなものを使用してください。

$(window).resize(function() {
    $('html, body').animate({ scrollTop: $(document).height() },  0);
                  return false;
             });
于 2013-02-08T03:46:23.373 に答える
0

Andsoaの答えは正しいように聞こえます。window.resizeで何かを考えていました。

私の答えは直接的なものではありませんが、あなたがやろうとしていることを達成する既存のスクリプトがたくさんあるので、それらをチェックすることで時間を節約できます：http: //www.impressivewebs.com/parallax-scrolling-scripts-プラグイン/

于 2013-02-08T04:32:16.473 に答える