オブジェクト内の関数を使用して、スクロール時にサイドパネルをトップパネルに変換しています。
次のようになります (「コードを縮小し、オブジェクト名を削除しました」):
$(document).on("scroll", vars.stickyNav );
var vars = { ... etc
undoStick: function() {
vars.sticked = false;
vars.stickyMenu.removeClass('_sticked');
return vars.stickyMenu.animate({ 'top': '-60px' }, 0, function() {
vars.clone.css({'left':-32,display:'none'});
});
},
stickyNav: function() {
if ( ! vars.sticked && vars.stickyHeight <= vars.scrollTop ) {
vars.sticked = true;
return vars.stickyMenu.addClass('_sticked').animate({ 'top': '40px'}, 0, function(){
vars.clone.show(null);
vars.clone.css('left',0);
});
}
else if ( vars.sticked && vars.stickyTop >= vars.scrollTop ) {
return vars.undoStick();
}
}
}
これの問題は..ページの一番下から一番上まで非常に速くスクロールすると、パネルが横にくっつかないことです。通常/遅い/通常の高速でスクロールすると機能します。
ほとんどの変数は、スクロール関数の外で定義されています。スクロール時に $(window).scrollTop() 変数を更新するウィンドウにバインドされた追加のスクロール関数があります。
この動作の理由は何ですか? アニメート機能は 0ms に設定されています。
PS: css トランジション (cubic bezier) があります。