【jQuery】指定した場所までスクロールすると下からふわっと出てくる

2024.4.3
更新 2026.10.27
デザインのメモ
jQuery

あのー、下からふわっと出したいのですが、場所指定ってできますかー？

場所指定、できますよー

【サンプル】指定した場所までスクロールすると下からふわっと出てくる

まずはスクロールですねー

コードを見る（HTML・CSS・jQuery）

HTML

<p class="bo_txt">スクロールしてくださーい</p>

<div class="s_section">
  <p class="bo_txt">まだでーす</p>
</div>

<p class="bo_txt by">ここまでスクロールすると下からふわっと出てきます</p>

<div class="s_section" id="js-trigger">
  <p class="bo_txt">まだでーす</p>
</div>

<div class="in_fixed_bottom" id="js-fixed-btn">
  <div class="in_fixed-inner">
    <div class="in_fixed-btn">
      <a href="https://125naroom.com/web/3863" target="_blank" rel="noopener" class="_a">詳しくはこちら</a>
    </div>
  </div>
</div>

CSS

/*=========
.in_fixed
=========*/

.in_fixed_bottom {
  position: fixed;
  bottom: -200px;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #f3efe6;
  box-sizing: border-box;
  padding: 24px;
  visibility: hidden;
  z-index: 9;
  transition: .5s;
}
/* 出てくる（jQuery で class『is-show』を付ける） */
.in_fixed_bottom.is-show {
  bottom: 0;
  visibility: visible;
}
.in_fixed-inner {
  display: flex;
  justify-content: center;
}
.in_fixed-btn {
  width: 100%;
}
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

/*=========
スクロールする場所（見た目。なくても動きます）
=========*/

.s_section {
  background: #fff;
  padding: 50em 0;
}
.bo_txt {
  margin: 0;
  color: #2b2a27;
  font-size: 14px;
  text-align: center;
  padding: 2.0em 1.0em;
  border-top: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
.by {
  background: #e8dc6a;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .in_fixed_bottom, a._a { transition: none; }
}

jQuery

$(function () {
  var $trigger = $('#js-trigger'); //場所を指定する
  var $fixed = $('#js-fixed-btn'); //ふわっと出てくる

  function check() {
    // 『#js-trigger』の上の端が画面の上まで来たら出す、戻ったら引っこめる
    $fixed.toggleClass('is-show', $trigger[0].getBoundingClientRect().top < 0);
  }
  $(window).on('scroll', check);
  check(); //ページを開いたときにも 1 回たしかめる
});

見本ページをひらく（下からふわっと出てくる）

【サンプル】指定した場所までスクロールすると上からふわっと出てくる

上からだって出てきますよー
ちなみに、左から、右から、もできますよー

コードを見る（HTML・CSS・jQuery）

HTML

<p class="bo_txt">スクロールしてくださーい</p>

<div class="s_section">
  <p class="bo_txt">まだでーす</p>
</div>

<p class="bo_txt by">ここまでスクロールすると上からふわっと出てきます</p>

<div class="s_section" id="js-trigger">
  <p class="bo_txt">まだでーす</p>
</div>

<div class="in_fixed_top" id="js-fixed-btn">
  <div class="in_fixed-inner">
    <div class="in_fixed-btn">
      <a href="https://125naroom.com/web/3863" target="_blank" rel="noopener" class="_a">詳しくはこちら</a>
    </div>
  </div>
</div>

CSS

/*=========
.in_fixed
=========*/

.in_fixed_top {
  position: fixed;
  top: -200px;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #f3efe6;
  box-sizing: border-box;
  padding: 24px;
  visibility: hidden;
  z-index: 9;
  transition: .5s;
}
/* 出てくる（jQuery で class『is-show』を付ける） */
.in_fixed_top.is-show {
  top: 0;
  visibility: visible;
}
.in_fixed-inner {
  display: flex;
  justify-content: center;
}
.in_fixed-btn {
  width: 100%;
}
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

/*=========
スクロールする場所（見た目。なくても動きます）
=========*/

.s_section {
  background: #fff;
  padding: 50em 0;
}
.bo_txt {
  margin: 0;
  color: #2b2a27;
  font-size: 14px;
  text-align: center;
  padding: 2.0em 1.0em;
  border-top: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
.by {
  background: #e8dc6a;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .in_fixed_top, a._a { transition: none; }
}

jQuery

$(function () {
  var $trigger = $('#js-trigger'); //場所を指定する
  var $fixed = $('#js-fixed-btn'); //ふわっと出てくる

  function check() {
    // 『#js-trigger』の上の端が画面の上まで来たら出す、戻ったら引っこめる
    $fixed.toggleClass('is-show', $trigger[0].getBoundingClientRect().top < 0);
  }
  $(window).on('scroll', check);
  check(); //ページを開いたときにも 1 回たしかめる
});

見本ページをひらく（上からふわっと出てくる）