Лепкави дълги странични ленти - jquery, лепкава

Опитвам се да разбера как става това уебсайт създаде тяхната лепкава странична лента. Има много уроци по jQuery за това как да създадете позиция, фиксирана странична лента, но никой от тях не се занимава специално с проблема с дългата странична лента.

Най-добрият код, който мога да измислям дотук, е следният:

$(function () {
var lst = 0;
var height = $(".sidebar").height();
var offset = $(".sidebar").offset();
$(window).scroll(function () {
if ($(window).scrollTop() > lst) { //downscroll
if ($(window).scrollTop() > offset.top) {
$(".sidebar").stop().animate({
marginTop: $(window).scrollTop() - 100
});
} else {
$(".sidebar").stop().animate({
marginTop: 0
});
}
} else { //upscroll
if ($(window).scrollTop() < offset.top) {
$(".sidebar").stop().animate({
marginTop: 0
});
}
}
lst = $(window).scrollTop();
});
});

Jsfiddle тук, Щеше да е много благодарен, ако някой можеше да ме насочи в правилната посока. Благодаря!

Отговори:

Съжалявам, че отново открих този пост две години след това, ноза хората, които търсят как да се залепват дълга / огромна странична лента, би било полезно. Рециклирайки кода си, трябва само да коригирате два реда и да получите желания ефект:

$(function () {
var lst = 0;
var height = $(".sidebar").height();
var offset = $(".sidebar").offset();
$(window).scroll(function () {
if ($(window).scrollTop() > lst) { //downscroll
if ($(window).scrollTop() > offset.top) {
$(".sidebar").stop().animate({
marginTop: $(window).scrollTop() - 100
});
} else {
$(".sidebar").stop().animate({
marginTop: 0
});
}
} else { //upscroll
if ($(window).scrollTop() < offset.top) {
$(".sidebar").stop().animate({
marginTop: $(window).scrollTop()
});
}
}
lst = $(window).scrollTop();
offset = $(".sidebar").offset();
});
});

Въпреки че обикновено се кодира в променливото свойство css position: fixed и position: relative, когато искате да превъртите и да спрете страничната лента (като WordPress при редактиране на публикация / страница), тук е друга версия, когато това свойство не е съвместимо с нашия css:

$(function () {
var lst = 0;
var sidebar = $(".sidebar");
var container = sidebar.parent("div").height()+400;
var height = sidebar.height();
var offset = sidebar.offset();
$(window).scroll(function () {
if ($(window).width()>768) {
if ($(window).scrollTop() > lst) { //downscroll
var bottom_trigger = parseFloat(sidebar.css("paddingTop")) + parseFloat(offset.top) + height;
if (($(window).scrollTop()+$(window).height()) > (bottom_trigger) && ($(window).scrollTop()+$(window).height()) < container) {
sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst));
}
} else { //upscroll
var top_trigger = parseFloat(sidebar.css("paddingTop"))+parseFloat(offset.top)-100;
if ($(window).scrollTop() < top_trigger) {
sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst));
}

}
lst = $(window).scrollTop();
}
});

Хей погледнах техния код, последвах отделно парче, което ме доведе тук http://foundation.zurb.com/old-docs/f3/grid.php, Изглежда, че тяхната мрежова система е почтиидентичен с този на twitter bootstraps, въпреки че никога не съм работил с twitters. Разделът в тази връзка, който се отнася до вас, изглежда работи с компенсации и по-важното е Block Grids.