HighLab

ヘッダーの追従

  • 公開日:
  • 更新日:
  • 文字数:2372文字

ヘッダーをある程度下にスクロールしていくと上に追従の形で表示されるようにしたい場合があると思いますので今回はそちらの説明を行います。

$(function() {
  //Heder
  var Header = $('.classname');
  var showFlag = true;

  //topBtn.hide();
  var timer = false;
  $(window).scroll(function () {
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if ($(this).scrollTop() > 1000) {

        if (showFlag == false) {
                showFlag = true;
          Header.addClass("fixed");
          Header.animate({top: "0px"},400);
          $('.bunjou_kurokawa').css('padding-top','76px');
        }

      } else {
        if (showFlag) {
          showFlag = false;
          Header.animate(
            {top: "-80px"},400,
            function () {
              // アニメーションが完了した後に実行される
              Header.removeClass("fixed");
              $('.bunjou_kurokawa').css('padding-top','0px');
            }
          );
        }
      }
    },0);
  });
});

css

.fixed{
    position: fixed;
    left: 0px;
    background-color: #fff;
    z-index: 9999;
  }

モバイル時には追従はやめたい場合

$(function() {
    //Heder
    var Header = $('.header-fixed');
    var showFlag = true;

    //topBtn.hide();
    var timer = false;
    $(window).scroll(function () {
        var w = $(window).width();
        var mobile = 767;
      if (w > mobile) {
            if (timer !== false) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                if ($(this).scrollTop() > 1200) {

                    if (showFlag == false) {
                        showFlag = true;
                        Header.addClass("fixed");
                        Header.animate({top: "0px"},400);
                        Header.css('display','block');
                    }
                } else {
                    if (showFlag) {
                        showFlag = false;
                        Header.animate(
                            {top: "-96px"},400,
                            function () {
                                // アニメーションが完了した後に実行される
                                Header.removeClass("fixed");
                                Header.css('display','none');
                            }
                        );
                    }
                }
            },0);
        }else{
            Header.css('display','none');
        }
    });

});