この問題の解決策について、助けと洞察をいただければ幸いです。最初に表示される高さが 180px のヘッダー div を持つ Web サイトを開発しています。ヘッダー div の高さは 340px です。ユーザーがリンクをクリックすると、ヘッダー div を下にスライドして残りの部分 (上部) を表示する必要があります。したがって、数学的に言えば、ユーザーがページをロードすると、340 ピクセルのヘッダー div の下部 180 ピクセルが表示されます。リンクをクリックすると、div の残りの部分が下にスライドして、上部の 160 ピクセルが表示されます。ユーザーが同じリンクをクリックすると、ヘッダー div がスライドして戻り、下部の 180 ピクセルのみが再び表示されます。
これを機能させようとしましたが、何が間違っているのかわかりません。私の最初の考えは、slideToggle() (非表示/表示) を使用することでしたが、それを機能させることができないようです。StackOverflow の他の人は animate() を提案していますが、それを機能させる方法もわかりません。
StackOverflow で検索したところ、div 全体の表示と非表示に関する多くの質問が見つかったようですが、問題は、div を完全に表示および非表示にすることです。div を下にスライドさせて上部の非表示部分を表示し、元の静止位置 (-160px オフスクリーン) に戻す必要があります。
どんな助けでも大歓迎です！以下にスターターコードを含めました。
HTML:
<div id="header">
<a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>
JQuery:
$(document).ready(function(){
$('.toggle').click(function(){
$('#header').slideToggle("slow");
return false;
});
});
CSS:
#header {
position: fixed; /*I would like this div to always be fixed to the top of the browser window*/
top: 160px;
left: 0;
width: 100%;
height: 340px;
z-index: 10;
}