Q&A
「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1
文字を画面が見えたらフェードインするようにしたいです。
コードを書いてみたのですが、うまく動きません。どなたかお力をお貸しください
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SHIORIのポートフォリオ</title> <link href="css/style.css" rel="stylesheet"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="http://css3-mediaqueriesjs.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> </head> <body> <div class="block-one"> <div class="box1"> <div id="saidver"> <div id="sso" class="gazo-box"><img src="./img/enoshima.PNG" width="180" height="50"></div> <div id="ssone" class="gazo-box">トップ</div> <div id="sstwo" class="gazo-box">江の水って？</div> <div id="ssthree" class="gazo-box">江の水のペンギン</div> <div id="ssfour" class="gazo-box">江の水のクラゲ</div> <div id="ssfour" class="gazo-box">海の仲間たち</div> </div> <div class="one"> <div class="oneo">海の仲間たち</div> <div class="oneoo">~仲間の生活をのぞいてみよう~</div> </div> </div> </div> <div class="block-two"> <div class="ttwo"> <div class="two">まず初めに…</div> <div class="twoo">江の水って？</div> </div> </div> <div class="block block-three"> <div class="three"> <div class="tthre">そこはまるで海の底</div> <div class="ttthre">３万匹の魚が私たちを出迎えます</div> </div> </div> <div class="block block-four"> <div class="four"> <div class="fourr">みんなあなたを待っています</div> <div class="fourrr">さあ、海の世界へいらっしゃい</div> </div> </div> <div class="block block-five"> <div class="five"> <div class="fivee">さぁさぁお友達をもっと知ろう</div> <div class="fiveee">江の水のペンギン</div> </div> </div> <div class="block block-six"> <div class="six"> <div class="sixx">こんにちは～</div> <div class="sixxx">江の島水族館に住んでますぺんぎんです</div> </div> </div> <div class="block block-seven"> <div class="seven"> <div class="sevenn">僕は泳ぐことが得意だよ</div> <div class="sevennn">みてみて～スイスイ泳ぐよ～</div> </div> </div> <div class="block block-eight"> <div class="eight"> <div class="eightt">仲間もたーっくさん！</div> <div class="eighttt">毎日楽しい</div> </div> </div> <div class="block block-nine"> <div class="nine"> <div class="ninee">僕たちのことがよくわかったかな？</div> <div class="nineee">いつでも江の水でまってるねー！</div> </div> </div> </body>
.block-two { width: 100%; height: 100vh; display: flex; justify-content: center; position: -webkit-sticky; position: sticky; top: 0; background-image: url(../img/haikei.jpg); background-size: cover; background-repeat: no-repeat; z-index: 200; transition:.8s; }
$(function(){ $(window).scroll(function(){ var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if(scroll+windowHeight >= $('.block-two').offset().top) { $('.block-two').fadeIn(); } else { $('.block-two').fadeOut(); } }); });
回答1件
0
ベストアンサー
その場しのぎ感はありますが、fadeする要素をttwoにしたらいいと思いますよ。
js
1if(scroll+windowHeight >= $('.block-two').offset().top) { 2 $('.ttwo').fadeIn(); 3} else { 4 $('.ttwo').fadeOut(); 5}
投稿2018/07/17 00:42
総合スコア3191
フェードインできませんでした、、、
他の条件が邪魔しているのかもしれませんね。
いただいた条件＋私が提示した条件であれば、フェードインしています。
https://codepen.io/iamaimi/pen/BPzOeg?editors=1111
（※わかりやすいようにフェードインをゆっくりにしています。）
あなたの回答
tips
プレビュー
