ヘッダーの追従

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

$(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');
        }
    });

});