Перемещение блока при скроллинге
Здравствуйте хочется реализовать следующую функцию на сайте:
div блок находится где-нибудь внизу или на середине страницы, при скролинге как только верх окна браузера доходит до данного блока он начинает перемещаться, ну и соответственно заканчивет перемещаться при достижении нижней границы "контейнера" примеры: 1) 9gag.com 2) ntvplus.ru/channels/ На одном форуме дали ссылку на вот этот зарубежный ресурс imakewebthings.com/jquery-waypoints/#examples, но немогу разобраться, код написан сразу для 4-х функций, а мне только 1 нужна (Sticky Elements) |
Хороший алгоритм вы написали. Так и делайте.
При прокрутке, как только блок достигнет верха страницы, меняйте его местоположение. Как только местоположение больше Х, переставайте менять. Либо конкретные вопросы, либо в раздел РАБОТА. |
вообще-то это делается с помощью css, свойство называется position и имеет значение fixed.
|
melky, Прочитайте вопрос внимательнее. Ему нужно чтобы блок зафиксировался у верхней границы браузера только при условии, что этот блок в неё упрётся...
Вам необходимо получать координату верхней границы блока и проверять разницу между ним и верхней границей браузера. Как только равно нулю или 5 пикселям к примеру, то задавайте новые стили для блока (fixed). Ну я повторил ваши мысли. Успехов. |
Здраствуйте! Кто нибудь сделал такой останавливающийся блок сбоку(как на этом сайте 9gag.com )! Пожалуйста скиньте код!
. |
Пожалуйста, вот код:
var $block = $("#block") // блок, который должен зафиксироваться при скролле var scrollTreshold = 500 // позиция скролла, при которой блок должен остановиться var fixedClass = "fixed" // класс css, который должен фиксирует блок $(window).scroll(function(){if($(window).scrollTop()>scrollTreshold){$block.addClass(fixedClass)}else{$block.removeClass(fixedClass)}}) |
Цитата:
Спасибо большое! За ответ! Но не могли бы вы поподробнее! Как вставить его? Для особо одаренных:blink: :blink: :blink: Благодарю! А то я запутался как вывести все это в блок.? |
А прочитайте код. Он снабжён комментариями.
Прочитайте ответы выше. И станет вообще всё предельно ясно. К тому же вы говорите, что учитесь. А это значит, что не приемлете варианта, чтобы за вас сделали всё-всё-всё. В этом ваши принципы верны. Да и другие тоже не любят халявщиков. И поскольку вы не такой, то конечно же прочитаете о том свойстве css, на котором подобные решения реализованы, и отпишетесь о своих успехах. |
Наконец то сделал! Перерыл несколько сотен сайтов и наконец то нашел, что искал! Фиксированный блок, останавливающийся при прокрутке!
Реализовал на этом сайте Паук-Портал.ru При прокрутке, в правой колонке, последний блок скроллится и останавливается! Если, кому то надо, код скрипта смотрите в исходном коде сайта. Или спрашивайте здесь, постараюсь ответить и помочь. P.S. Сайт в разработке, не судите строго. . |
Сергей-Сергей, зря вы пишете в js явно то, что должно быть в css.
Скрипт должен всего лишь добавлять класс, в котором уже описаны свойства position:fixed;top:30px. |
Часовой пояс GMT +3, время: 00:40. |