More than 3 years have passed since last update.

【jQuery】　scroll スクロールすると浮き上がってくるやつ　はじめました。

Posted at 2020-07-08

##【ゴール】

##【メリット】
■　リッチなサイト構築
■　jQuery理解度向上　

##【実装】

###手順
＊jQueryのgem、もしくわ、ライブラリの読み込みが必要です！
HTML記述
jQuery記述

###HTML記述
＊JSが読み込めるように「id」をつけます。

hoge.html

.
.
.
.
<h2 id="text" style="display: none;">文字が遅れて見えてきます</h2>
.
.
.
.

###jQuery記述
＊「window」に対して、スクロールイベントを発火
＊「if」による条件分岐
　→＊「.scrollTop」が一定の数値で発火（今回は1100で設定。）
　→＊「fadeIn」でフワッと現れます。

hoge.js

$(window).scroll(function () {
    if ($(this).scrollTop() > 1100) {
      $('.text').fadeIn(1000);
    }
 });

以上、jQuery記述少なくてとても便利です。。。。
##【合わせて読みたい】

■ 【jQuery】初心者でもよく理解できたやつ
https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461

■ 【raty.js】星付き　評価機能　実装　rails　view表示まで
https://qiita.com/tanaka-yu3/items/6aab71a46764370c00d0

■他、スクロールイベントについて
https://yuyauver98.me/scroll-show-hide-btn/