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

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

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

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

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

コードはこちら

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" 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>

CSS

.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;
}

jQuery

<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.

コードはこちら

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" 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>

CSS

.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;
}

jQuery

<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(英語版)

さいごに

きのこさん
わー、できてるー!
きのこさん
では、クリームパン買いに行きましょうー
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

HOPPIN’ GARAGE
HOPPIN’ GARAGE
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう