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

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

場所指定、できますよー

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

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

See the Pen
【jQuery】指定した場所までスクロールすると下からふわっと出てくる by 125naroom (@125naroom)
on CodePen.

<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" aria-expanded="false">
  <div class="in_fixed-inner">
    <div class="in_fixed-btn">
      <a href="https://125naroom.com/web/3863" target="_blank" class="_a">詳しくはこちら</a>
    </div>
  </div>
</div>

.in_fixed_bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: #ccc1aa;
  box-sizing: border-box;
  padding: 24px;
  z-index: 9;
}
.in_fixed_bottom[aria-expanded=false] {
  bottom: -200px;
  transition: .5s;
}
.in_fixed_bottom[aria-expanded=true] {
  bottom: 0;
  transition: .5s;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery(function($){
  window.addEventListener("scroll", (function() {
    var t = window.pageYOffset
    , e = document.getElementById("js-trigger") //場所を指定する
    , n = document.getElementById("js-fixed-btn"); //ふわっと出てくる
    n && e && (t > t + e.getBoundingClientRect().top ? n.setAttribute("aria-expanded", "true") : n.setAttribute("aria-expanded", "false"))
  }))
});

サンプルページはこちら

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

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

See the Pen
【jQuery】指定した場所までスクロールすると下からふわっと出てくる by 125naroom (@125naroom)
on CodePen.

<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" aria-expanded="false">
  <div class="in_fixed-inner">
    <div class="in_fixed-btn">
      <a href="https://125naroom.com/web/3863" target="_blank" class="_a">詳しくはこちら</a>
    </div>
  </div>
</div>

.in_fixed_top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #ccc1aa;
  box-sizing: border-box;
  padding: 24px;
  z-index: 9;
}
.in_fixed_top[aria-expanded=false] {
  top: -200px;
  transition: .5s;
}
.in_fixed_top[aria-expanded=true] {
  top: 0;
  transition: .5s;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery(function($){
  window.addEventListener("scroll", (function() {
    var t = window.pageYOffset
    , e = document.getElementById("js-trigger") //場所を指定する
    , n = document.getElementById("js-fixed-btn"); //ふわっと出てくる
    n && e && (t > t + e.getBoundingClientRect().top ? n.setAttribute("aria-expanded", "true") : n.setAttribute("aria-expanded", "false"))
  }))
});

サンプルページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

わー、できてるー！

では、クリームパン買いに行きましょうー