https://www.ipsa.co.jp/
こちらのサイトを見本にコーディングしているプログラミング歴3ヶ月の者です。
学んでいる知識はHTML,CSS,Jqueryです。
スクロールすることで
・上からslideDownするヘッダー
・slideUpするメインのコンテンツ
をjqueryで作りたいと考えています。
ただ、自分のコードでは思うように動いてくれず困っております。
皆様のお力をお借りできると嬉しいです。
①スクロール量に応じて、slideDwon,slideUpできない
②更新ボタンを押すと、window.height（ウィンドウの高さ）のうち
どの高さでも、一瞬なのですが「.header.first」の画像が出現してしまう
// スクロールイベント
$(function () {
// scrollイベントを取得した際の処理を定義
$(window).on("scroll", function () {
const scrollTop = $(window).scrollTop();
const bgPostition = scrollTop / 0;
// scrollTop()が0より大きい場合
if ($(this).scrollTop() > 0) {
// ヘッダーバーをslideDownして表示
$(".header__main").slideDown('slow');
$(".header__first").slideUp('slow');
// scrollTop()が0の場合
} else {
// ヘッダーバーをslideUpして非表示
$(".header__main").slideUp('slow');
$(".header__first").slideDown('slow');
}
});
});
</script>
<header>
<!-- ヘッダーメイン -->
<div class="header__main slideDown">
<p class="header__main--annnoouncetxt">
<u>自主回収に関するお詫びとお知らせ</u>
</p>
<div class="header__main--list">
<!-- 左ボックス -->
<div class="header__main--lbox wrap">
<img src="images/icon_search.svg" alt class="header__main--icon">
<a><img src="images/icon_cart.svg" alt class="header__main--icon"></a>
</div>
<!-- トグル -->
<div class="toggle">
<span></span>
<span></span>
</div>
<!-- 右ボックス -->
<!-- ナビメニュー -->
<div class="header__main--rbox">
<nav class="navmenu">
<ul class="header__main--rboxlist wrap">
<li>
<p class="header__main--rboxitem">
ABOUT IPSA
</p>
</li>
<li>
<p class="header__main--rboxitem">
FEATURED
</p>
</li>
<li>
<p class="header__main--rboxitem">
SKIN CARE
</p>
</li>
<li>
<p class="header__main--rboxitem">
MAKEUP
</p>
</li>
<li>
<p class="header__main--rboxitem">
OTHERS
</p>
</li>
<li>
<div class="header__main--3list">
<p class="header__main--3item">
CONTACT
</p>
<p class="header__main--3item">
SHOPS
</p>
<p class="header__main--3item">
SIGN IN
</p>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="header__main--ttl">
<img src="images/logo_ipsa.svg" alt class="header__main--ttlimg">
</div>
</div>
<!-- ヘッダーファースト -->
<div class="header__first">
<img src="images/sp_main_season_2021sp.jpg" alt class="header__first--img img">
<img src="images/logo_ipsa_white.svg" alt class="header__first--logo">
<img src="images/sp_sf_arrow.png" alt class="header__first--scroll">
</div>
</header>
・見本サイトの検証ツールを使い、ページのjquery・HTMLを確認した→全て確認したがわからなかった
・「jquery標準講座」という本を購入し読み込んだ→詳しく載っていなかった
・ネットを5時間ほど調べた→わからなかった
よろしくお願いいたします。
おそらく CSS 側の定義がないと、何が悪いのかわからないと思います。
また header__first の方はどうしたいのかよくわからないので、header__main についてだけ。
（それも推測というよりも、ただの勘ですけど）。
CSS に以下のような定義をしてみたらどうでしょうか？
.header__main {
position: fixed;
top: 0;
left: 0;
display: none;
}
また、javascript 側の以下の2行は不要ではないでしょうか？
（少なくとも2行目のゼロ除算は削除しておいた方が良い気がします）
const scrollTop = $(window).scrollTop();
const bgPostition = scrollTop / 0;
当て推量ですが。