注目キーワード

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

特定の位置までスクロールしたら消える要素の実装方法
  1. HOME
  2. Web関連
  3. サイト制作
  4. 特定の位置までスクロールしたら消える要素の実装方法
目次

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

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

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

共通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参考書はこちら！

Web制作の現場で使うjQueryデザイン入門改訂新版

posted with ヨメレバ
西畑一馬 アスキー・メディアワークス 2013年03月
楽天ブックス
Amazon
7net
honto
ebookjapan

jQuery 仕事の現場でサッと使える！ デザイン教科書

posted with ヨメレバ
吉本集著/ロクナナワークショップ監修 技術評論社 2015年04月
楽天ブックス
Amazon
7net
honto

jQuery最高の教科書

posted with ヨメレバ
シフトブレイン SBクリエイティブ 2013年11月27日頃
楽天ブックス
Amazon
7net
honto
ebookjapan
　

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