Удалите липкость после прокрутки элемента

Question

Очень легко сделать некоторые элементы липкими после прокрутки нескольких пикселей. Однако как бы вы это сделали?

Я хочу, чтобы элемент был липким, но после прокрутки, например. 400px (в исходное положение) он останется там.

Очень хороший пример можно найти здесь http://ultrahd-3d-televize.heureka.cz

Answer 1

Мне потребовалось время, чтобы написать свой ответ, потому что я воспользовался возможностью узнать о 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); 
    }; 
}; 

дребезга помогает лишь вызвать функцию после того, как прокрутка останавливается, максимум раз в 100мс. (просто измените 100 на что-то еще, если вы хотите, чтобы он быстрее реагировал).

Это хорошая идея - отбросить все функции, которые запускаются при прокрутке или, например, изменение размера, для предотвращения вычисления браузером для каждого пикселя, прокручиваемого или измененного размера, и только стрельбы, когда пользователь выполняет прокрутку или изменение размера. Его также можно использовать в случае ввода или вызова AJAX. Особенно в случае вызовов AJAX вы хотите только активировать функцию, когда это необходимо, а не когда пользователь поднимает свой палец из письма. См. example here.

Answer 2

Вы можете добиться этого путем изменения положения в fixed и absolute через JQuery, использование 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 показывает, как сделать это.