Плавающий блок при прокрутке. jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
romaamor

Re: Плавающий блок при прокрутке. jQuery

romaamor 30 сен 2014, 17:04 Сообщение

В принципе сделать так как я хотел удалось при помощи другого скрипта. Но вод не задача, все ссылки в меню при прокрутке страницы становятся не активными. Видать не суждено.

Вот сам фиксированный блок. Может кому понадобится.

Задача

Реализовать фиксированный блок с плавающим верхним отступом.

HTML


Код: Выделить всё

<div id="fixedBox"> Какой-то очень важный блок, который все время нужно видеть. </div>


В CSS задаем оформление и позиционирование:

Код: Выделить всё

#fixedBox { /* размеры фиксированного блока */ height: 30px; width: 900px; position: fixed; /* отступ сверху когда шапка видна полностью */ margin-top: 170px; }


Скрипт для пересчета отступа на основе jQuery (естественно, не забудь подключить и саму библиотеку):

Код: Выделить всё

<script type="text/javascript"> jQuery(document).ready(function(){ /* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */ function getScrollTop() { var scrOfY = 0; if( typeof( window.pageYOffset ) == "number" ) { //Netscape compliant scrOfY = window.pageYOffset; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { //DOM compliant scrOfY = document.body.scrollTop; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { //IE6 Strict scrOfY = document.documentElement.scrollTop; } return scrOfY; } /* пересчитываем отступ при прокрутке экрана */ jQuery(window).scroll(function() { fixPaneRefresh(); }); function fixPaneRefresh(){ if (jQuery("#fixedBox").length) { var top = getScrollTop(); if (top < 170) jQuery("#fixedBox").css("margin-top",170-top+"px"); /* 170 - это наш отступ */ else jQuery("#fixedBox").css("margin-top","0"); } } }); </script>

Аватара пользователя
CabinetAdmin

Re: Плавающий блок при прокрутке. jQuery

CabinetAdmin 30 сен 2014, 19:47 Сообщение

romaamor » Сегодня, 20:04 писал(а):Но вод не задача, все ссылки в меню при прокрутке страницы становятся не активными.

Добавь z-index: 9;. Должны стать активными.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Плавающий блок при прокрутке. jQuery

romaamor 30 сен 2014, 20:49 Сообщение

CabinetAdmin » 51 минуту назад писал(а):Добавь z-index: 9;. Должны стать активными.

Становятся активными, но все остальные ссылки сайта - нет.

Аватара пользователя
CabinetAdmin

Re: Плавающий блок при прокрутке. jQuery

CabinetAdmin 01 окт 2014, 14:28 Сообщение

Не должно быть такого.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Плавающий блок при прокрутке. jQuery

romaamor 01 окт 2014, 16:50 Сообщение

CabinetAdmin » Сегодня, 15:28 писал(а):Не должно быть такого.

Не вероятно но факт. Как бы получается слой который перекрывает весь сайт.

Аватара пользователя
romaamor

Плавающий блок при прокрутке. jQuery

romaamor 16 мар 2015, 20:00 Сообщение

CabinetAdmin,а где скрипт ? Было бы круто если Вы его перезальёте. Спасибо.

Аватара пользователя
romaamor

Плавающий блок при прокрутке. jQuery

romaamor 16 мар 2015, 20:13 Сообщение

Выдернул у Вас с демо страницы адрес скрипта. :)
Последний раз редактировалось romaamor 16 мар 2015, 23:49, всего редактировалось 1 раз.

Аватара пользователя
romaamor

Плавающий блок при прокрутке. jQuery

romaamor 16 мар 2015, 20:44 Сообщение

Пытаюсь прикрутить к этому ещё и - http://cabinetadmina.ru/viewtopic.php?f=121&t=3750. Не выходит. Оно вообще будет работать с такой связкой ?

Аватара пользователя
CabinetAdmin

Плавающий блок при прокрутке. jQuery

CabinetAdmin 16 мар 2015, 21:04 Сообщение

Должен.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
CabinetAdmin

Плавающий блок при прокрутке. jQuery

CabinetAdmin 16 мар 2015, 21:09 Сообщение

Главное чтобы работало: скрипт должен быть после библиотеки, у блока должен быть id="scroll".
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Плавающий блок при прокрутке. jQuery

romaamor 17 мар 2015, 03:54 Сообщение

Не как. Уже часов 6 мучаюсь. Ваш скрипт не как не хочет работать. В нете нашёл рабочие но все не то. Заезжают на футер.
CabinetAdmin, ведь здесь этот скрипт используется ? -

Код: Выделить всё

<script type="text/javascript"> (function($){ $.fn.stickyScroll = function(options) { var defaults = { easing: 'linear', duration: 300, queue: false }, $t = this; options = $.extend(defaults, options); this.css({ position: 'relative', top: 0 }); $(window).scroll(function() { var wst = $(window).scrollTop(); $t.each(function() { var getObject = $(this), parent = getObject.parent() if(wst > (parent.offset().top) && (parent.height() + parent.position().top - 20) > (wst + getObject.height()) ){ getObject.animate({ top: (wst - parent.offset().top) + "px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); } else if(wst < (parent.offset().top)){ getObject.animate({ top: "0px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); } }); }); return this; }; })(jQuery); </script>

Аватара пользователя
CabinetAdmin

Плавающий блок при прокрутке. jQuery

CabinetAdmin 17 мар 2015, 06:28 Сообщение

Плюс вызов:

Код: Выделить всё

<script type="text/javascript"> jQuery(function() { jQuery('#scroll').stickyScroll(); }); </script>


Без него скрипт отрабатывать не будет.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Плавающий блок при прокрутке. jQuery

romaamor 17 мар 2015, 17:02 Сообщение

CabinetAdmin писал(а):Источник цитаты Плюс вызов:

Само собой. Тем ни мение не работает.

Аватара пользователя
CabinetAdmin

Плавающий блок при прокрутке. jQuery

CabinetAdmin 17 мар 2015, 17:54 Сообщение

У боковой колонки есть указанная высота? Пространство по которому блок должен скользить.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Плавающий блок при прокрутке. jQuery

romaamor 17 мар 2015, 18:00 Сообщение

CabinetAdmin писал(а):Источник цитаты У боковой колонки есть указанная высота? Пространство по которому блок должен скользить.

Должен ходить вдоль списка тем форума. Что бы было понятно то вот мой тестовый форум - http://3.1.0.satelitray.ru/viewforum.php?f=3
Блок рекламы.



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость