0

2 つの異なる領域があるサイトを作成しています。ボタンをクリックすると、2 番目のコンテンツ領域が最初の領域の上にスライドインするという考え方です。

どちらの領域も幅 100% に設定され、ウィンドウ幅全体を占めるように配置されます。

2 番目の領域 (ページの読み込み時に非表示) では、クリックするボタンだけを表示するために、より高い z-index と 98% の margin-left を使用しています。

jQuery では、そのボタンをクリックするとクラスが切り替えられ、左マージンが 98% から 0 に移動するため、代わりに非表示領域が表示されます。

非表示領域の高さが最初の領域よりもはるかに高いことを除いて、すべて正常に機能します。最初のコンテンツ領域が表示されているときは本体がoverflow:hiddenになり、2番目のコンテンツ領域が表示されているときはoverflow:visibleになるように設定しました。

問題は、2 番目の領域を下にスクロールし、クリックして最初の領域に戻ると、最初の領域に overflow:hidden が表示されますが、上から表示されないことです。

クラスがトグルされる前後に scrollTop を試みましたが成功しませんでした。

これをjsfiddleで複製しようとしましたが、ビューポートの100％であるため、表示するのが非常に難しく、冗長すぎて申し訳ありません! 簡単なスクリーンショットを添付します。

誰かがアイデアを持っていれば素晴らしいでしょう、ありがとう!

ここに画像の説明を入力

4

1 に答える 1

0

こちらのページをご覧ください: cargocollective.com/nonfeed

実際にページ全体をスクロールせずに、適切な div をスクロールする必要があるようです。この設計例では、次のように、垂直スクロール セクションごとに 3 つの div があります。

div.entry {
  overflow: hidden;
}
div.entry div.wrapper {
  overflow-x: hidden;
  overflow-y: auto;
}
div.entry div.wrapper div.content {
  overflow: hidden;
}

あなたの状況では、適切な div を別の div でラップしoverflow: hidden、jQuery 関数を使用して div の高さをページの高さに設定する必要があります。

ウィンドウの高さを設定する jQuery コードを次に示します。

var height_change_callback = function() {
var bodyheight = jQuery(window).height();
jQuery(".wrapper").each(function() {
        jQuery(this).css("height", bodyheight-80);
    });
}
jQuery(document).ready(height_change_callback);
// for the window resize
jQuery(window).resize(height_change_callback);

それが役立つことを願っています。

于 2013-04-15T13:17:38.150 に答える