Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамический блок (меню) со скролингом в пределах другого блока (https://javascript.ru/forum/dom-window/70599-dinamicheskijj-blok-menyu-so-skrolingom-v-predelakh-drugogo-bloka.html)

webmanss 18.09.2017 17:05

Динамический блок (меню) со скролингом в пределах другого блока
 
Вложений: 1
Всем привет, нужна помощь в реализации, есть только задумка.
Схема работы на макете.
Цель сделать плавающий блок, чтобы при скролинге страницы он перемещался в приделах основного блока. Т.е начинал свое движение вниз при достижении основного блока верха страницы и останавливался соответственно. Средствами css этого сделать не получается, можете помочь со скриптом?

Rasy 18.09.2017 19:19

webmanss,
Конкретизируй условие

webmanss 18.09.2017 19:56

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

Rasy 18.09.2017 21:38

Цитата:

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

Сразу сохрани оффсет меню от верха в переменную.

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

Цитата:

Сообщение от webmanss
И второй вопрос т.к. Блок 'Б' это меню нужно, активировать соответствующий пункт по ходу прокрутки.

Тут есть нюансы, многое зависит от верстки. Есть свой готовый скрипт, но не понятно подойдет ли он сюда.

webmanss 19.09.2017 09:25

нашел в нете такой скрипт:
$(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() }
			}
		);
	});


});

От него можно оттолкнуться или это вообще не то?

Rasy 19.09.2017 11:07

Цитата:

Сообщение от webmanss
От него можно оттолкнуться

Да.
http://imakewebthings.com/waypoints/...icky-elements/


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