Динамический блок (меню) со скролингом в пределах другого блока
Вложений: 1
Всем привет, нужна помощь в реализации, есть только задумка.
Схема работы на макете. Цель сделать плавающий блок, чтобы при скролинге страницы он перемещался в приделах основного блока. Т.е начинал свое движение вниз при достижении основного блока верха страницы и останавливался соответственно. Средствами css этого сделать не получается, можете помочь со скриптом? |
webmanss,
Конкретизируй условие |
Есть блок 'А' расположенный на некотором расстоянии от верха и низа ( не фиксированно).
Есть блок 'Б' изначально находящийся на одной высоте с блоком 'А', но имеющий меньшие размеры по высоте. Задача: при прокрутке страницы вниз зафиксировать блок 'Б', чтобы он оставался на против блока 'А'. Как мне видится нужно включить свойство css fixed у блока 'Б' и своевременно выключить. Но как это сделать не знаю. И второй вопрос т.к. Блок 'Б' это меню нужно, активировать соответствующий пункт по ходу прокрутки. На макете не совсем понятно нарисовал. Блок 'А' состоит из нескольких (голубой цвет) внутренних блоков. Надо было выделить их вместе. |
Цитата:
Отслеживай событие прокрутки. Если величина прокрутки больше равна оффсету меню от верхней точки документа и меню не имет класс фиксед, то фиксируем меню. Иначе, если меню скролл меньше сохраненного отступа и меню не имеет класс фиксед, то удаляем класс. Цитата:
|
нашел в нете такой скрипт:
$(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() } } ); }); }); От него можно оттолкнуться или это вообще не то? |
Цитата:
http://imakewebthings.com/waypoints/...icky-elements/ |
Часовой пояс GMT +3, время: 18:52. |