[jQuery]position fixedしたものをフェードインさせた(Rails)

はじめに

本日、私自身railsにてjQueryを初めて学習したため、アウトプットいたします。

jQueryの導入方法

以下参照です。
Rails6でのjQuery導入方法
爆速で使用できるので、こちらにも記載しておきます。

①ターミナルにて

% yarn add jquery

②Webpackの設定

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)

module.exports = environment

③ application.jsの設定

javascript/packs/application.js

//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery') ←ここです。

//中略

これで使えます。

フェードインさせたコード

  $(function() {
    $('.menu-bar').hide();
    $(window).scroll(function () {
      if ($(this).scrollTop() > 120){
        $('.menu-bar').fadeIn()
      }else{
        $('.menu-bar').fadeOut();
      }
    });
  });

アプリケーションでメニューバーを付けてます。
scrollTop() > 120にて
一番スタートの画面が120pxスクロールしたら、フェードイン
それ以外はフェードアウトという仕様です。

終わりに

jQueryがすごく便利で楽しく、
オリジナルアプリそっちのけで遊んでいたら時間がたくさん経過していました。

また、YouTubeで丁寧に解説している方もおりますので、
是非こちらも参照ください。
jQuery入門 #1 jQueryの概要とjQueryを使うための準備をしよう

明日も頑張ります！！