前提・実現したいこと
スクロール後にテキストの背景だけが現れるようにしたい
発生している問題・エラーメッセージ
テキストだけを表示しておきたいのに背景と共に消えてしまう。
該当のソースコード
HTML5
1
コード <main class="main">
</main> ``` ``` ソースコード ``` ```css コード .main-section { text-align: center; margin-bottom: 83px; // background-image: url(../images/sea.png); background-size: cover; height: 480px; // opacity: 0; transition: all 1s ease 0s; }<section class="main-section"> <div class="introduction"> <img src="images/introduction.png" alt="" class="main-intro"> <p class="profile"><img src="images/profile.png" alt="profile"></p> </div> </section>
.main-section.show {
background-image: url(../images/sea.png);
}
.main-intro {
margin-top: 100px;
}
.profile {
margin-top: 27px;
}
```js コード $(function(){ $(window).scroll(function (){ $('.main-section').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 200){ $(this).addClass('show'); }else{ $(this).removeClass('show'); } }); }); });
試したこと
divタグを増やしてp要素を独立させようとしましたが、うまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
vscodeを使用しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。