Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как указать в jQuery, что scrollTop "начнет уменьшаться"? (https://javascript.ru/forum/misc/68877-kak-ukazat-v-jquery-chto-scrolltop-nachnet-umenshatsya.html)

Булат Азат улы 15.05.2017 21:15

Как указать в jQuery, что scrollTop "начнет уменьшаться"?
 
Здравствуйте. Мой сайт состоит из 3-х блоков. По середине основной, по краям - дополнительные. Средняя страница зачастую бывает длиннее крайних. Хотел бы "закрепить" эти блоки, как в Вконтакте (как с левой стороны в профиле, или как блок с правой стороны, при поиске людей).
Делаю я это с помощью $(window).scrollTop().
Так вот, подскажите пожалуйста, как я могу сообщить программно "когда значение scrollTop начнет уменьшаться" (т.е. пользователь покрутит вверх)?

laimas 15.05.2017 21:28

$(function() {
    $(window).scroll(function() {
        this.pageYOffset - значение прокрутки
        "когда значение scrollTop начнет уменьшаться" - может достаточно проверки какого-то минимального значения, при котором выполнить действие? Именно так и работает "закрепление". 
    })
});

рони 15.05.2017 21:51

Булат Азат улы,
$(function() {
    var top = $(window).scrollTop();
    $(window).scroll(function() {
        if($(window).scrollTop() < top) {//  ....
        };
        top = $(window).scrollTop();
    })
});

laimas 15.05.2017 21:55

рони,
скорее всего ему не это нужно, а типа sticky плагина. Хотя может и от нулевого значения хватит, я понятия не имею чего там в ВК вообще есть. )

Булат Азат улы 15.05.2017 22:10

рони,
Спасибо! Всё получается так, как я и хотел.

Булат Азат улы 15.05.2017 22:23

laimas,
Есть, допустим, несколько блоков, стоящие рядом (с помощью стилей float:left и float:right).
И, как обычно, если один из таких блоков будет короче/длиннее, то при просмотре длинного блока (при прокрутке вниз) на месте коротких блоков будет пустота (они уйдут наверх). Если пользователь заинтересуется этими короткими блоками, ему придется всё крутить обратно, наверх.
Поэтому, делаю так, чтобы при прокрутке страницы короткие блоки н уходили наверх, а, дойдя до своего конца, приняли свойство position:fixed. И если пользователь немножко покрутит наверх, менять параметр bottom или top, двигая эти блоки.
Вот, наглядный пример из Вконтакте (если окно браузера большое, и правый блок помещается полностью, нужно раскрыть доп. параметры внизу).

рони 15.05.2017 22:32

Цитата:

Сообщение от Булат Азат улы
рони,
Спасибо! Всё получается так, как я и хотел.

рад за вас!
Цитата:

Сообщение от Булат Азат улы
laimas,
Есть, допустим, несколько блоков, стоящие рядом

ещё один плагин на эту тему https://abouolia.github.io/sticky-sidebar/

Булат Азат улы 16.05.2017 19:36

Я пробовал в условии запустить функцию, для повторного отбора результата 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

Булат Азат улы,
строка 5 назначается множество раз, у любого компьютера не хватит ресурсов.

Булат Азат улы 16.05.2017 21:16

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


Часовой пояс GMT +3, время: 15:47.