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

サンプルページはこちら