Как указать в jQuery, что scrollTop "начнет уменьшаться"?
Здравствуйте. Мой сайт состоит из 3-х блоков. По середине основной, по краям - дополнительные. Средняя страница зачастую бывает длиннее крайних. Хотел бы "закрепить" эти блоки, как в Вконтакте (как с левой стороны в профиле, или как блок с правой стороны, при поиске людей).
Делаю я это с помощью $(window).scrollTop(). Так вот, подскажите пожалуйста, как я могу сообщить программно "когда значение scrollTop начнет уменьшаться" (т.е. пользователь покрутит вверх)? |
$(function() {
$(window).scroll(function() {
this.pageYOffset - значение прокрутки
"когда значение scrollTop начнет уменьшаться" - может достаточно проверки какого-то минимального значения, при котором выполнить действие? Именно так и работает "закрепление".
})
});
|
Булат Азат улы,
$(function() {
var top = $(window).scrollTop();
$(window).scroll(function() {
if($(window).scrollTop() < top) {// ....
};
top = $(window).scrollTop();
})
});
|
рони,
скорее всего ему не это нужно, а типа sticky плагина. Хотя может и от нулевого значения хватит, я понятия не имею чего там в ВК вообще есть. ) |
рони,
Спасибо! Всё получается так, как я и хотел. |
laimas,
Есть, допустим, несколько блоков, стоящие рядом (с помощью стилей float:left и float:right). И, как обычно, если один из таких блоков будет короче/длиннее, то при просмотре длинного блока (при прокрутке вниз) на месте коротких блоков будет пустота (они уйдут наверх). Если пользователь заинтересуется этими короткими блоками, ему придется всё крутить обратно, наверх. Поэтому, делаю так, чтобы при прокрутке страницы короткие блоки н уходили наверх, а, дойдя до своего конца, приняли свойство position:fixed. И если пользователь немножко покрутит наверх, менять параметр bottom или top, двигая эти блоки. Вот, наглядный пример из Вконтакте (если окно браузера большое, и правый блок помещается полностью, нужно раскрыть доп. параметры внизу). |
Цитата:
Цитата:
|
Я пробовал в условии запустить функцию, для повторного отбора результата scrollTop(), но почему-то все скрипты на странице перестали работать. Вот код:
var top = $(window).scrollTop();
$(window).scroll(function() {
if($(window).scrollTop() < top) {
var top1 = $(window).scrollTop();
$(window).scroll(function() {
$("#unBit").css({"bottom":$(window).scrollTop() - top2}); //это я хочу задать, чтобы значение "bottom" понемножку уменьшался, и блок понемножку уходил вниз
};
};
top = $(window).scrollTop();
});
В чём может быть причина отказа? |
Булат Азат улы,
строка 5 назначается множество раз, у любого компьютера не хватит ресурсов. |
рони,
А как этого можно избежать? В этом случае же мне нужно получить константу "top", чтобы отталкиваться с него. То есть, пользователь крутил-крутил вниз, остановился и начал крутить наверх. Мне нужно захватить то значение, когда пользователь быд ниже, и от нинешнего его значения scrollTop() отнять то, наибольшее значение. Получится отрицательное значение, которое и нужно вписать в "bottom", чтобы блок, будучи в состоянии "fixed", уходил вниз. Читал, что в Яваскрипте есть только нововведенная константа (const), но он выдаёт ошибку, если пытаться обновить его значение. А так мне не пойдет. Хотя, почему-то, const у меня вообще не работает. Даже с ошибкой. Пробовал писать вот так:
var top = $(window).scrollTop();
$(window).scroll(function() {
if($(window).scrollTop() < top) {
$("#unBit").css({"bottom":$(window).scrollTop() - top + "px"});
};
top = $(window).scrollTop();
});
Но так у меня при прокрутке вниз блок не уходит вниз, а стоит внизу (bottom:0). То есть $(window).scrollTop() и "top" равны одному и тому же значению. |
Булат Азат улы,
не смотря на ваши примеры в контакте и описания, я не понимаю что вы хотите сделать, поэтому не могу помочь. посмотрите плагин, предложенный выше, может быть он решит вашу задачу. |
Наконец, я смог разобраться с тем плагином, которую мне подсказали. Спасибо.
|
рони,
Но все равно, тот плагин оказался для меня не удобным. Файл скрипта весит целых 8 кб. Да ещё и сколько лишних блоков пришлось создать - нужный блок вписать в 2 внешних блока, и так все!!! Я напишу свой полный код, который на данный момент сделал, и вы не могли бы подправить меня в "правильный путь"?
$(window).scroll(function(){
var WinH = $(window).height(); //получаю высоту окна
var UnBitOz = $("#unBit").outerHeight(true); //получаю длину блока, которую я буду фиксировать
var UnBuryn = $(window).width() / 2 + 345; //это я вычисляю положение блока по вертикали (ведь при position:fixed блок отрывается со своего места и уходит в самый левый край)
if ($(window).scrollTop() >= UnBitOz + 130 - WinH) $("#unBit").css({"position":"fixed", "bottom":"0", "left":UnBuryn}); //если scroll-ом блок дойдёт до самого своего низа, то он примет значение position:fixed. (130 - это верхняя шапка).
// Вот. До этого места всё работает. А дальше то, что вы мне посоветовали (что тоже прекрасно работает):
var top = $(window).scrollTop();
$(window).scroll(function() {
if($(window).scrollTop() < top) {
$("#unBit").css({"bottom":"222"}); // это когда прокручиваешь наверх (т.е. значение scrollTop начинает уменьшаться, этот блок тоже со всеми должен уходить вниз, до того, как полностью покажется верхняя сторона, и принять значение top:0, или остановить изменение bottom.)
};
top = $(window).scrollTop();
});
});
Ну, в общем, то же самое, что и вы мне дали, только там мусора и глюков очень много. |
|
рони,
Спасибо. Попробую воспользоваться примером. А не могли бы объяснить, что это за код:
0 < b ? a.css({
background: "red",
top: c.top
}) : a.css({
background: "green",
top: c.top + b
});
Что вообще первая строка объясняет? Что там за знак вопроса? И на четвертой строке, что за двоеточие? |
Цитата:
Это
0 < b ? a.css({
background: "red",
top: c.top
}) : a.css({
background: "green",
top: c.top + b
});
Тоже самое что и
if(0<b){
a.css({
background: "red",
top: c.top
});
}else{
a.css({
background: "green",
top: c.top + b
});
};
|
Nexus,
Понял, спасибо. |
| Часовой пояс GMT +3, время: 18:39. |