スクロールすると○○する系色々

MARKLEAPS

2021.06.25

スクロールすると○○する関連の実装方法をまとめました。

一定量スクロールしたらヘッダーを固定表示

・html

<header>
    <h1>header</h1>
</header>

<h1>header</h1>

</header>

・css

header {
	width: 100%;
}
.fixed {
	position: fixed;
	top: 0;
	left: 0;
}

header {

width: 100%;

}

.fixed {

position: fixed;

top: 0;

left: 0;

}

・jQuery

$(function(){
  $(window).on('scroll', function () {
  //スクロールが100に達したら固定
    if ($(this).scrollTop() > 100) {
      $('header').addClass('fixed');
    } else {
      $('header').removeClass('fixed');
    }
  });
});

$(function(){

$(window).on('scroll', function () {

//スクロールが100に達したら固定

if ($(this).scrollTop() > 100) {

$('header').addClass('fixed');

} else {

$('header').removeClass('fixed');

}

});

・100 の数値は任意の数値を指定ください。
・’header’ を.navi　等に書き変えれば、ヘッダー以外にも応用できます。

一定量スクロールしたら要素を表示。ページ上部へ戻ったら非表示。

・html

<div class="scroll_fade"><a href="">バナー</a></div>

1	<div class="scroll_fade"><a href="">バナー</a></div>

・jQuery

$(function(){
  var scrollFade = $('.scroll_fade');
  scrollFade.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        scrollFade.fadeIn();
    } else {
        scrollFade.fadeOut();
    }
  });
});

$(function(){

var scrollFade = $('.scroll_fade');

scrollFade.hide();

//スクロールが100に達したらボタン表示

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

scrollFade.fadeIn();

} else {

scrollFade.fadeOut();

}

});

要素の位置までスクロールしたら要素を固定

・html

<ul class="bs_navi">
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
</ul>

</ul>

・css

.bs_navi {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.bs_navi.navi_fixed {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	z-index: 999;
}

.bs_navi {

width: 100%;

max-width: 1000px;

margin: 0 auto;

}

.bs_navi.navi_fixed {

max-width: 1000px;

margin: 0 auto;

padding: 0;

position: fixed;

top: 80px;

left: 0;

right: 0;

z-index: 999;

}

・jQuery

$(function(){
  var offset = $('.bs_navi').offset();

  $(window).scroll(function () {
      if ($(window).scrollTop() > offset.top) {
          $('.bs_navi').addClass('navi_fixed');
      } else {
          $('.bs_navi').removeClass('navi_fixed');
      }
  });
});