私は2つのウェイポイントを使用して実装しています
1. a sticky header (http://imakewebthings.com/jquery-waypoints/sticky-elements/)
2. An infinite live scroll (http://imakewebthings.com/jquery-waypoints/infinite-scroll/)
ヘッダーは機能します。ただし、ライブスクロールがトリガーされるとすぐに、スティッキーヘッダーが元の位置に戻り、下部の[上]ボタンも消えます。ただし、ライブスクロールは引き続き機能します。
ライブスクロールが開始されたら、stickyHeader関数をもう一度呼び出してみました。しかし、それは役に立ちません。私のstickyHeader関数は次のとおりです。
var stickyHeader = function() {
$('.top').addClass('hidden');
$('body').waypoint(function(event, direction) {
$('.top').toggleClass('hidden', direction === "up");
}, {
offset: '-100%'
}).find('#stickyHeaderText').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
};
更新: 無限スクロール
var opts = {
offset: '100%'
};
var $footer = $('#footerDivId');
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
ftr.remove();
// get more data
$footer.waypoint(opts);
}, opts);
stickyHeader();