Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2017, 21:15
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

Как указать в jQuery, что scrollTop "начнет уменьшаться"?
Здравствуйте. Мой сайт состоит из 3-х блоков. По середине основной, по краям - дополнительные. Средняя страница зачастую бывает длиннее крайних. Хотел бы "закрепить" эти блоки, как в Вконтакте (как с левой стороны в профиле, или как блок с правой стороны, при поиске людей).
Делаю я это с помощью $(window).scrollTop().
Так вот, подскажите пожалуйста, как я могу сообщить программно "когда значение scrollTop начнет уменьшаться" (т.е. пользователь покрутит вверх)?
Ответить с цитированием
  #2 (permalink)  
Старый 15.05.2017, 21:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$(function() {
    $(window).scroll(function() {
        this.pageYOffset - значение прокрутки
        "когда значение scrollTop начнет уменьшаться" - может достаточно проверки какого-то минимального значения, при котором выполнить действие? Именно так и работает "закрепление". 
    })
});
Ответить с цитированием
  #3 (permalink)  
Старый 15.05.2017, 21:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Булат Азат улы,
$(function() {
    var top = $(window).scrollTop();
    $(window).scroll(function() {
        if($(window).scrollTop() < top) {//  ....
        };
        top = $(window).scrollTop();
    })
});
Ответить с цитированием
  #4 (permalink)  
Старый 15.05.2017, 21:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

рони,
скорее всего ему не это нужно, а типа sticky плагина. Хотя может и от нулевого значения хватит, я понятия не имею чего там в ВК вообще есть. )
Ответить с цитированием
  #5 (permalink)  
Старый 15.05.2017, 22:10
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

рони,
Спасибо! Всё получается так, как я и хотел.
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2017, 22:23
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

laimas,
Есть, допустим, несколько блоков, стоящие рядом (с помощью стилей float:left и float:right).
И, как обычно, если один из таких блоков будет короче/длиннее, то при просмотре длинного блока (при прокрутке вниз) на месте коротких блоков будет пустота (они уйдут наверх). Если пользователь заинтересуется этими короткими блоками, ему придется всё крутить обратно, наверх.
Поэтому, делаю так, чтобы при прокрутке страницы короткие блоки н уходили наверх, а, дойдя до своего конца, приняли свойство position:fixed. И если пользователь немножко покрутит наверх, менять параметр bottom или top, двигая эти блоки.
Вот, наглядный пример из Вконтакте (если окно браузера большое, и правый блок помещается полностью, нужно раскрыть доп. параметры внизу).
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2017, 22:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Булат Азат улы
рони,
Спасибо! Всё получается так, как я и хотел.
рад за вас!
Сообщение от Булат Азат улы
laimas,
Есть, допустим, несколько блоков, стоящие рядом
ещё один плагин на эту тему https://abouolia.github.io/sticky-sidebar/
Ответить с цитированием
  #8 (permalink)  
Старый 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();
});


В чём может быть причина отказа?
Ответить с цитированием
  #9 (permalink)  
Старый 16.05.2017, 20:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Булат Азат улы,
строка 5 назначается множество раз, у любого компьютера не хватит ресурсов.
Ответить с цитированием
  #10 (permalink)  
Старый 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" равны одному и тому же значению.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Развитие стандарта HTML Paguo-86PK Элементы интерфейса 104 14.12.2015 21:58
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как узнать, что левая клавиша мыши не зажата FINoM Events/DOM/Window 13 05.02.2012 18:01
JQUERY - как скачать данную библиотеку? Golovastik jQuery 7 06.03.2011 18:03
Разбираем AjaxOOP eai Общие вопросы Javascript 41 04.11.2010 23:37