15.05.2017, 21:15
|
Аспирант
|
|
Регистрация: 07.09.2016
Сообщений: 83
|
|
Как указать в jQuery, что scrollTop "начнет уменьшаться"?
Здравствуйте. Мой сайт состоит из 3-х блоков. По середине основной, по краям - дополнительные. Средняя страница зачастую бывает длиннее крайних. Хотел бы "закрепить" эти блоки, как в Вконтакте (как с левой стороны в профиле, или как блок с правой стороны, при поиске людей).
Делаю я это с помощью $(window).scrollTop().
Так вот, подскажите пожалуйста, как я могу сообщить программно "когда значение scrollTop начнет уменьшаться" (т.е. пользователь покрутит вверх)?
|
|
15.05.2017, 21:28
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
$(function() {
$(window).scroll(function() {
this.pageYOffset - значение прокрутки
"когда значение scrollTop начнет уменьшаться" - может достаточно проверки какого-то минимального значения, при котором выполнить действие? Именно так и работает "закрепление".
})
});
|
|
15.05.2017, 21:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Булат Азат улы,
$(function() {
var top = $(window).scrollTop();
$(window).scroll(function() {
if($(window).scrollTop() < top) {// ....
};
top = $(window).scrollTop();
})
});
|
|
15.05.2017, 21:55
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
рони,
скорее всего ему не это нужно, а типа sticky плагина. Хотя может и от нулевого значения хватит, я понятия не имею чего там в ВК вообще есть. )
|
|
15.05.2017, 22:10
|
Аспирант
|
|
Регистрация: 07.09.2016
Сообщений: 83
|
|
рони,
Спасибо! Всё получается так, как я и хотел.
|
|
15.05.2017, 22:23
|
Аспирант
|
|
Регистрация: 07.09.2016
Сообщений: 83
|
|
laimas,
Есть, допустим, несколько блоков, стоящие рядом (с помощью стилей float:left и float:right).
И, как обычно, если один из таких блоков будет короче/длиннее, то при просмотре длинного блока (при прокрутке вниз) на месте коротких блоков будет пустота (они уйдут наверх). Если пользователь заинтересуется этими короткими блоками, ему придется всё крутить обратно, наверх.
Поэтому, делаю так, чтобы при прокрутке страницы короткие блоки н уходили наверх, а, дойдя до своего конца, приняли свойство position:fixed. И если пользователь немножко покрутит наверх, менять параметр bottom или top, двигая эти блоки.
Вот, наглядный пример из Вконтакте (если окно браузера большое, и правый блок помещается полностью, нужно раскрыть доп. параметры внизу).
|
|
15.05.2017, 22:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Сообщение от Булат Азат улы
|
рони,
Спасибо! Всё получается так, как я и хотел.
|
рад за вас!
Сообщение от Булат Азат улы
|
laimas,
Есть, допустим, несколько блоков, стоящие рядом
|
ещё один плагин на эту тему https://abouolia.github.io/sticky-sidebar/
|
|
16.05.2017, 19:36
|
Аспирант
|
|
Регистрация: 07.09.2016
Сообщений: 83
|
|
Я пробовал в условии запустить функцию, для повторного отбора результата 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();
});
В чём может быть причина отказа?
|
|
16.05.2017, 20:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Булат Азат улы,
строка 5 назначается множество раз, у любого компьютера не хватит ресурсов.
|
|
16.05.2017, 21:16
|
Аспирант
|
|
Регистрация: 07.09.2016
Сообщений: 83
|
|
рони,
А как этого можно избежать?
В этом случае же мне нужно получить константу "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" равны одному и тому же значению.
|
|
|
|