web-dev-qa-db-ja.com

下にスクロールした後の粘着ヘッダー

このWebサイトで次のスティッキーヘッダーを見ました： http://dunked.com/（もはやアクティブではない、 アーカイブされたサイトを見る ）

下にスクロールすると、スティッキーヘッダーが上から下に表示されます。

コードを見ましたが、本当に複雑に見えます。私はこれだけを理解しています：通常のヘッダーはJSで複製され、ページを下にスクロールすると上からアニメーションします。

javascriptjqueryheadersticky
26
Nepo Znat

スタートです基本的に、読み込み時にヘッダーをコピーし、（.scrollTop()または_window.scrollY_を使用して）ユーザーがポイント（200ピクセルなど）を超えてスクロールしたかどうかを確認します。次に、元のビューに移動するクラス（この場合は_.down_）を切り替えるだけです。

最後に、クローンに_transition: top 0.2s ease-in_を適用するだけで、_.down_状態にあるときにビューにスライドします。 Dunkedの方が優れていますが、少し遊んで設定するのは簡単です

[〜＃〜] css [〜＃〜]

_header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}
_

eitherVanilla JS（必要に応じてポリフィル）

_var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));
_

orjQuery

_$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});
_

新しい反射

上記はOPの元々の質問「Dunkedはこの効果をどのように達成しますか？」に答えますが、このアプローチはお勧めしません。手始めに、トップナビゲーション全体をコピーするのはかなりコストがかかる可能性があり、元の（わずかな作業で）使用できない本当の理由はありません。

さらに、Paul Irishなどは、 約記述translate()を使用したアニメーションの方がtopを使用したアニメーションよりも優れています。パフォーマンスが向上するだけでなく、要素の正確な高さを知る必要がないことも意味します。上記のソリューションは、次のように変更されます （JSFiddleを参照） ：

_header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}
_

変換を使用する場合の唯一の欠点は、 ブラウザーサポートはかなり良い ですが、おそらく互換性を最大化するためにベンダープレフィックスバージョンを追加する必要があることです。

61
Ian Clark

ここにJSフィドルがあります http://jsfiddle.net/ke9kW/1/

他の人が言うように、ヘッダーを固定に設定し、ディスプレイで開始します：none

その後、jQuery

$(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

200は、下に移動するピクセル単位の高さです。 openクラスの追加は、else ifの代わりにelseifを実行できるようにすることです。そのため、一部のコードはすべてのscrolleventで不必要に実行されず、メモリを少し節約します。

12
joevallender

同様の効果を得るのに役立つjQueryプラグインのリストは次のとおりです。 http://jquery-plugins.net/tag/sticky -scroll

2
eagor

スティッキーjsを使用することをお勧めします。これは今まで見た中で最高のオプションです。このjsを広告するだけでいい

 https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

以下のコードを使用します：

<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

そのgitリポジトリ： https://github.com/garand/sticky

1
Shiv Singh

JQueryの.scroll（）関数を使用して、scrollTopを使用してツールバーのスクロール値のイベントを追跡しました。次に、条件を使用して、置換したい値よりも大きいかどうかを判断しました。以下の例では、「結果」でした。値がtrueの場合、結果ラベルにクラス「fixedSimilarLabel」が追加され、新しいスタイルが考慮されました。

    $('.toolbar').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
        $('.results-label').addClass('fixedSimilarLabel');
    }
    else {      
        $('.results-label').removeClass('fixedSimilarLabel');
    }
});

http://codepen.io/franklynroth/pen/pjEzeK

1
Franklyn Roth

効率化のためにデバウンスを追加 http://davidwalsh.name/javascript-debounce-function

0
mrdnk

jqueryを使用した同様のソリューションは次のようになります。

$(window).scroll(function () {
  $('.header').css('position','fixed');
});

これにより、スクロールするとすぐにヘッダーが固定位置要素に変わります

0
Matt Saunders

jqueryを使用したウィンドウの下部スクロールから上部スクロール。

 <script> 

 var lastScroll = 0;

 $(document).ready(function($) {

 $(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });
 </script>
0
Musaib Memdu

css：

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

JS：

$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});
0
Anup

これはFirefoxでは機能しませんでした。

コードがhtmlレベルでオーバーフローを配置するかどうかに基づいて条件を追加しました。 Animate scrollTopがFirefoxで機能しない を参照してください。

  var $header = $("#header #menu-wrap-left"),
  $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = Array(); 
    fromTop["body"] = $("body").scrollTop();
    fromTop["html"] = $("body,html").scrollTop();

if (fromTop["body"]) 
    $('body').toggleClass("down", (fromTop["body"] > 650));

if (fromTop["html"]) 
    $('body,html').toggleClass("down", (fromTop["html"] > 650));

  });
0
Megan