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

【jQuery】指定した場所までスクロールすると下からふわっと出てくる
あのー、下からふわっと出したいのですが、場所指定ってできますかー?
場所指定、できますよー

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

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

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

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

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"))
  }))
});

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

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

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

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

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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

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

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集