このWebサイトで次のスティッキーヘッダーを見ました: http://dunked.com/(もはやアクティブではない、 アーカイブされたサイトを見る )
下にスクロールすると、スティッキーヘッダーが上から下に表示されます。
コードを見ましたが、本当に複雑に見えます。私はこれだけを理解しています:通常のヘッダーはJSで複製され、ページを下にスクロールすると上からアニメーションします。
スタートです基本的に、読み込み時にヘッダーをコピーし、(.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);
}
_
変換を使用する場合の唯一の欠点は、 ブラウザーサポートはかなり良い ですが、おそらく互換性を最大化するためにベンダープレフィックスバージョンを追加する必要があることです。
ここに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で不必要に実行されず、メモリを少し節約します。
同様の効果を得るのに役立つjQueryプラグインのリストは次のとおりです。 http://jquery-plugins.net/tag/sticky -scroll
スティッキー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
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://davidwalsh.name/javascript-debounce-function
jqueryを使用した同様のソリューションは次のようになります。
$(window).scroll(function () {
$('.header').css('position','fixed');
});
これにより、スクロールするとすぐにヘッダーが固定位置要素に変わります
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>
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");
}
});
これは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));
});