滾動元素後移除粘性

-1

在滾動幾個像素後粘貼某些元素非常簡單。但是，你會怎麼做呢？滾動元素後移除粘性

我想要一個元素是粘性的，但滾動後，例如， 400px（原來的位置）它會保持在那裏。

一個很好的例子可以在這裏http://ultrahd-3d-televize.heureka.cz

來源

2016-06-21 DN.

您向我們展示了您想要構建的示例！？那麼你的問題是什麼？ – Thomas

我想知道如何做到這一點。所以Codepen鏈接或提示如何做到這一點將不勝感激。 –

我寫了我的答案花了一段時間，因爲我利用這個機會來了解debouncing，以防止在每次完成一次滾動時調用scroll的代碼片段（理論上，您的瀏覽器氾濫）。

JSFIDDLE

我的jQuery：

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。

來源

2016-06-21 11:14:39 Rvervuurt

發現你可以通過改變位置fixed，並通過jQuery absolute實現這一目標，使用fixed當你想粘到一起移動和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展示瞭如何做到這一點。

來源

2016-06-21 08:36:54 hsh

滾動元素後移除粘性

回答

相關問題