特定の位置までスクロールしたら消える要素の実装方法

特定の位置までスクロールしたら消える要素の実装方法

ページ内スクロール時リンク先で要素を消す方法

ページ上部や下部に固定したバナー、ボタンなどがページ内リンク先まできたら消えるようにする実装方法を忘れないようにメモしました。

今回はページ下部の固定ボタンをページ内リンクさせました😊

共通css

 

.wrapper{
  display: block;
}
.cont{
  margin-bottom: 20px;
  padding: 20px;
  height: 300px;
  background-color: #eee;
  box-sizing: border-box;
}
.menu{
  display: block;
  padding: 15px 10px;
  width: 100%;
  background-color: #dee5f3;
  box-sizing: border-box;
  text-align: center;
}
.menu.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
}
.demo01__btn,
.demo02__btn,
.demo03__btn{
  position: fixed;
  bottom: 0;
  left: 0;
  display: block;
  padding:  10px;
  width: 100%;
  background-color: #f8f8f8;
  box-sizing: border-box;
}
.demo01__link,
.demo02__link,
.demo03__link{
  display: flex;
  width: 80%;
  margin: 0 auto;
  height: 50px;
  color:  #333;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #999;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.demo02__link{
  color: #e87979;
  border: 1px solid #ff9292;
}
.demo03__link{
  color: #6076c7;
  border: 1px solid #8895c7;
}

 

ページ内リンク先にきたら要素が消える

ページ内リンク先にページ下部固定ボタンが来たら、ページ下部固定ボタンが消えるようにします。

DEMO

HTML

 

<div class="wrapper">
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="demo01__btn js-demo01-btn-area">
       <a href="#demo01__area" class="demo01__link js-demo01-btn">ページ下部固定ボタン▼</a> 
    </div>
    <div id="demo01__area" class="cont js-demo01-area">
        <p>ここで止まる</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
</div>

jquery

 

 $(function(){
  $('.js-demo01-btn').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });

  var scrollend = $('#demo01__area').offset().top ; //ページ上部からの距離を取得
  var distance = 0;
  $(document).scroll(function(){
    distance = $(this).scrollTop(); //スクロールした距離を取得
    if (scrollend <= distance) {
      $('.js-demo01-btn-area').fadeOut();
    } else{
      $('.js-demo01-btn-area').fadeIn();
    }
  });

});

 

ページ内リンク先を50pxすぎたら消えるようにする

ページ内リンク先から50px下にスクロールしたら、ページ下部固定ボタンが消えるようにします。

DEMO

HTML

 

<div class="wrapper">
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="demo02__btn js-demo02-btn-area">
       <a href="#demo02__area" class="demo02__link js-demo02-btn">ページ下部固定ボタン▼</a> 
    </div>
    <div id="demo02__area" class="cont js-demo02-area">
        <p>ここで止まる</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
</div>

 

jquery

 

 $(function(){
  $('.js-demo02-btn').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });

  var scrollend = $('#demo02__area').offset().top + 50; //ページ上部からプラス50pxした距離を取得
  var distance = 0;
  $(document).scroll(function(){
    distance = $(this).scrollTop(); //スクロールした距離を取得
    if (scrollend <= distance) {
      $('.js-demo02-btn-area').fadeOut();
    } else{
      $('.js-demo02-btn-area').fadeIn();
    }
  });

});

 

ページ上部に固定メニューがある場合

ページ上部に固定メニューがある場合です。

固定メニューの高さ分、ページ内リンク先の上部に空きを作ります。

DEMO

HTML

 

<div class="menu js-menu">
    <p>固定メニュー</p>
</div>
<div class="wrapper">
    
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="demo03__btn js-demo03-btn-area">
       <a href="#demo03__area" class="demo03__link js-demo03-btn">ページ下部固定ボタン▼</a> 
    </div>
    <div id="demo03__area" class="cont js-demo03-area">
        <p>ここで止まる</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
</div>

 

jquery

 

 $(function(){
  var navPos = $('.js-menu').offset().top;
  var navHeight = $('.js-menu').outerHeight();
  var scrollend = $('#demo03__area').offset().top - 54 ; //ページ上部からの距離を取得
  var distance = 0;
  $(document).scroll(function(){
    // グローバルメニュー固定
    if ($(this).scrollTop() > navPos) {
        $('body').css('padding-top', navHeight);
        $('.js-menu').addClass('is-fixed');
    } else {
        $('body').css('padding-top', 0);
        $('.js-menu').removeClass('is-fixed');
    }
    // ページ内リンク先で固定下部ボタンを消す
    distance = $(this).scrollTop(); //スクロールした距離を取得
    if (scrollend <= distance) {
        $('.js-demo03-btn-area').fadeOut();
      } else{
        $('.js-demo03-btn-area').fadeIn();
      }
    });

  $('.js-demo03-btn').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - 54; // メニューの高さ分空きをとる
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });

});

 

おすすめのjQuery参考書はこちら!

 

サイト制作カテゴリの最新記事