15.03.2012, 15:18
|
Интересующийся
|
|
Регистрация: 15.03.2012
Сообщений: 17
|
|
Перемещение блока при скроллинге
Здравствуйте хочется реализовать следующую функцию на сайте:
div блок находится где-нибудь внизу или на середине страницы, при скролинге как только верх окна браузера доходит до данного блока он начинает перемещаться, ну и соответственно заканчивет перемещаться при достижении нижней границы "контейнера"
примеры:
1) 9gag.com
2) ntvplus.ru/channels/
На одном форуме дали ссылку на вот этот зарубежный ресурс imakewebthings.com/jquery-waypoints/#examples, но немогу разобраться, код написан сразу для 4-х функций, а мне только 1 нужна (Sticky Elements)
|
|
16.03.2012, 13:58
|
Аспирант
|
|
Регистрация: 27.12.2011
Сообщений: 90
|
|
Хороший алгоритм вы написали. Так и делайте.
При прокрутке, как только блок достигнет верха страницы, меняйте его местоположение. Как только местоположение больше Х, переставайте менять.
Либо конкретные вопросы, либо в раздел РАБОТА.
|
|
17.03.2012, 12:18
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
вообще-то это делается с помощью css, свойство называется position и имеет значение fixed.
|
|
17.03.2012, 22:51
|
Аспирант
|
|
Регистрация: 08.11.2011
Сообщений: 37
|
|
melky, Прочитайте вопрос внимательнее. Ему нужно чтобы блок зафиксировался у верхней границы браузера только при условии, что этот блок в неё упрётся...
Вам необходимо получать координату верхней границы блока и проверять разницу между ним и верхней границей браузера. Как только равно нулю или 5 пикселям к примеру, то задавайте новые стили для блока (fixed).
Ну я повторил ваши мысли.
Успехов.
|
|
08.09.2012, 17:21
|
Интересующийся
|
|
Регистрация: 08.09.2012
Сообщений: 10
|
|
Здраствуйте! Кто нибудь сделал такой останавливающийся блок сбоку(как на этом сайте 9gag.com )! Пожалуйста скиньте код!
.
Последний раз редактировалось Сергей-Сергей, 08.09.2012 в 17:33.
|
|
08.09.2012, 17:48
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.08.2012
Сообщений: 100
|
|
Пожалуйста, вот код:
var $block = $("#block") // блок, который должен зафиксироваться при скролле
var scrollTreshold = 500 // позиция скролла, при которой блок должен остановиться
var fixedClass = "fixed" // класс css, который должен фиксирует блок
$(window).scroll(function(){if($(window).scrollTop()>scrollTreshold){$block.addClass(fixedClass)}else{$block.removeClass(fixedClass)}})
|
|
08.09.2012, 19:28
|
Интересующийся
|
|
Регистрация: 08.09.2012
Сообщений: 10
|
|
|
|
08.09.2012, 22:32
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.08.2012
Сообщений: 100
|
|
А прочитайте код. Он снабжён комментариями.
Прочитайте ответы выше. И станет вообще всё предельно ясно.
К тому же вы говорите, что учитесь. А это значит, что не приемлете варианта, чтобы за вас сделали всё-всё-всё. В этом ваши принципы верны. Да и другие тоже не любят халявщиков. И поскольку вы не такой, то конечно же прочитаете о том свойстве css, на котором подобные решения реализованы, и отпишетесь о своих успехах.
Последний раз редактировалось LittlePony, 08.09.2012 в 22:34.
|
|
10.09.2012, 17:59
|
Интересующийся
|
|
Регистрация: 08.09.2012
Сообщений: 10
|
|
Наконец то сделал! Перерыл несколько сотен сайтов и наконец то нашел, что искал! Фиксированный блок, останавливающийся при прокрутке!
Реализовал на этом сайте Паук-Портал.ru
При прокрутке, в правой колонке, последний блок скроллится и останавливается!
Если, кому то надо, код скрипта смотрите в исходном коде сайта. Или спрашивайте здесь, постараюсь ответить и помочь.
P.S. Сайт в разработке, не судите строго.
.
Последний раз редактировалось Сергей-Сергей, 10.09.2012 в 18:09.
|
|
10.09.2012, 19:26
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.08.2012
Сообщений: 100
|
|
Сергей-Сергей, зря вы пишете в js явно то, что должно быть в css.
Скрипт должен всего лишь добавлять класс, в котором уже описаны свойства position:fixed;top:30px.
|
|
|
|