125naroom / デザインするところ(会社)です。

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

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

さいごに

きのこさん
わー、できてるー!
きのこさん
では、クリームパン買いに行きましょうー

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)