要素をスクロールした後のスティッキ性を除去する

Question

いくつかのピクセルをスクロールした後に要素をスティッキーにするのは簡単です。しかし、あなたはそれとはどのように反対のことをしますか？

要素をスティッキーにしたいが、スクロール後に400px（元の位置）にはそのまま残ります。

Aは非常に良い例が 使用fixedは、あなたが一緒に移動するスティッキーたいとき、あなたはfixedとjQuery経由absoluteに位置を変更することによって、これを達成することができ、ここでhttp://ultrahd-3d-televize.heureka.cz

Answer 1

scrollをチェックするコードが1つのスクロールが完了するたびに呼び出されるのを防ぐために、私はdebouncingについて学ぶ機会を利用していたので、 ）。

私のjQueryの

JSFIDDLE：

var menuHeight = $('.menu').height(); 
console.log(menuHeight); 

var scrollingMachine = debounce(function() { 
    var $this = $(this); 

    if($(document).scrollTop() > (menuHeight - 850)) { 
     console.log($(document).scrollTop() - 850); 
     $('.stickypart').addClass('absolute'); 
    } 
    else { 
     $('.stickypart').removeClass('absolute'); 
    } 
}, 100); 

window.addEventListener('scroll', scrollingMachine); 

// Returns a function, that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 
function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
    var context = this, args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
    }; 
}; 

デバウンスは、スクロールが停止した後に一度だけ100ms毎に最大で、関数を呼び出すことができます。 （より速く反応させたい場合は100を別のものに変更してください）。

ブラウザがスクロールまたはサイズ変更されたすべてのピクセルを計算したり、スクロールまたはサイズ変更が完了したときにのみブラウザが起動しないように、スクロールまたはサイズ変更などのトリガを受けるすべての機能をデバウンスすることをお勧めします。これは、タイピングやAJAX呼び出しの場合にも使用できます。特にAJAXコールの場合、ユーザが手紙から指を離したときではなく、必要なときにのみ関数を起動したい。 example hereを参照してください。

Answer 2

見つけることができ、absoluteときにそれを動いてはならない。あなたも、それが正しい場所で停止させるために、粘着性のtopを設定する必要があります。

var num = 400; //after num pixels, sticky doesn't move any more 

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) { 
     var top = $(window).height() + num; 
     $('.menu').css({"position":"absolute","bottom":"auto","top":top + "px"}); 
    } else { 
     $('.menu').css({"position":"fixed","bottom":"0","top":"auto"}) 
    } 
}); 

This Fiddleは、それを実現する方法を示しています。