Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2017, 17:05
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

Динамический блок (меню) со скролингом в пределах другого блока
Всем привет, нужна помощь в реализации, есть только задумка.
Схема работы на макете.
Цель сделать плавающий блок, чтобы при скролинге страницы он перемещался в приделах основного блока. Т.е начинал свое движение вниз при достижении основного блока верха страницы и останавливался соответственно. Средствами css этого сделать не получается, можете помочь со скриптом?
Изображения:
Тип файла: jpg перемещение блока (меню).jpg (38.7 Кб, 8 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2017, 19:19
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

webmanss,
Конкретизируй условие
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2017, 19:56
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

Есть блок 'А' расположенный на некотором расстоянии от верха и низа ( не фиксированно).
Есть блок 'Б' изначально находящийся на одной высоте с блоком 'А', но имеющий меньшие размеры по высоте. Задача: при прокрутке страницы вниз зафиксировать блок 'Б', чтобы он оставался на против блока 'А'.
Как мне видится нужно включить свойство css fixed у блока 'Б' и своевременно выключить.
Но как это сделать не знаю.
И второй вопрос т.к. Блок 'Б' это меню нужно, активировать соответствующий пункт по ходу прокрутки.
На макете не совсем понятно нарисовал.
Блок 'А' состоит из нескольких (голубой цвет) внутренних блоков. Надо было выделить их вместе.

Последний раз редактировалось webmanss, 18.09.2017 в 20:05.
Ответить с цитированием
  #4 (permalink)  
Старый 18.09.2017, 21:38
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Сообщение от webmanss
Как мне видится нужно включить свойство css fixed у блока 'Б' и своевременно выключить.
Сразу сохрани оффсет меню от верха в переменную.

Отслеживай событие прокрутки. Если величина прокрутки больше равна оффсету меню от верхней точки документа и меню не имет класс фиксед, то фиксируем меню. Иначе, если меню скролл меньше сохраненного отступа и меню не имеет класс фиксед, то удаляем класс.

Сообщение от webmanss
И второй вопрос т.к. Блок 'Б' это меню нужно, активировать соответствующий пункт по ходу прокрутки.
Тут есть нюансы, многое зависит от верстки. Есть свой готовый скрипт, но не понятно подойдет ли он сюда.
Ответить с цитированием
  #5 (permalink)  
Старый 19.09.2017, 09:25
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

нашел в нете такой скрипт:
$(function() {

	var nav_container = $(".nav-container");
	var nav = $("nav");
	
	var top_spacing = 50;
	var waypoint_offset = 50;

	nav_container.waypoint({
		handler: function(event, direction) {
			
			if (direction == 'down') {
			
				nav_container.css({ 'height':nav.outerHeight() });		
				nav.stop().addClass("sticky").css("top",-nav.outerHeight()).animate({"top":top_spacing});
				
			} else {
			
				nav_container.css({ 'height':'auto' });
				nav.stop().removeClass("sticky").css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});
				
			}
			
		},
		offset: function() {
			return -nav.outerHeight()-waypoint_offset;
		}
	});
	
	var sections = $("section");
	var navigation_links = $("nav a");
	
	sections.waypoint({
		handler: function(event, direction) {
		
			var active_section;
			active_section = $(this);
			if (direction == "up") active_section = active_section.prev();

			var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
			navigation_links.removeClass("selected");
			active_link.addClass("selected");

		},
		offset: '25%'
	})
	
	
	navigation_links.click( function(event) {

		$.scrollTo(
			$(this).attr("href"),
			{
				duration: 1800,
				offset: { 'left':0, 'top':-0.15*$(window).height() }
			}
		);
	});


});

От него можно оттолкнуться или это вообще не то?
Ответить с цитированием
  #6 (permalink)  
Старый 19.09.2017, 11:07
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Сообщение от webmanss
От него можно оттолкнуться
Да.
http://imakewebthings.com/waypoints/...icky-elements/
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как "подвесить" блок меню на кнопку gandreyev Элементы интерфейса 15 07.09.2017 13:59
Меню + ниже блок div dima_riabets Элементы интерфейса 0 28.12.2015 02:10
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Движение по элементам блока без перезапуска функции выпадающеего меню. tutelaris Элементы интерфейса 4 26.04.2013 09:15