Перемещение блока при скроллинге

[region029]

Здравствуйте хочется реализовать следующую функцию на сайте:
div блок находится где-нибудь внизу или на середине страницы, при скролинге как только верх окна браузера доходит до данного блока он начинает перемещаться, ну и соответственно заканчивет перемещаться при достижении нижней границы "контейнера"
примеры:
1) 9gag.com
2) ntvplus.ru/channels/

На одном форуме дали ссылку на вот этот зарубежный ресурс imakewebthings.com/jquery-waypoints/#examples, но немогу разобраться, код написан сразу для 4-х функций, а мне только 1 нужна (Sticky Elements)

[skfyann]

Хороший алгоритм вы написали. Так и делайте.
При прокрутке, как только блок достигнет верха страницы, меняйте его местоположение. Как только местоположение больше Х, переставайте менять.

Либо конкретные вопросы, либо в раздел РАБОТА.

[melky]

вообще-то это делается с помощью css, свойство называется position и имеет значение fixed.

[n1ko]

melky, Прочитайте вопрос внимательнее. Ему нужно чтобы блок зафиксировался у верхней границы браузера только при условии, что этот блок в неё упрётся...

Вам необходимо получать координату верхней границы блока и проверять разницу между ним и верхней границей браузера. Как только равно нулю или 5 пикселям к примеру, то задавайте новые стили для блока (fixed).

Ну я повторил ваши мысли.

Успехов.

[Сергей-Сергей]

Здраствуйте! Кто нибудь сделал такой останавливающийся блок сбоку(как на этом сайте 9gag.com )! Пожалуйста скиньте код!

.

[LittlePony]

Пожалуйста, вот код:

var $block = $("#block") // блок, который должен зафиксироваться при скролле
var scrollTreshold = 500 // позиция скролла, при которой блок должен остановиться
var fixedClass = "fixed" // класс css, который должен фиксирует блок 
$(window).scroll(function(){if($(window).scrollTop()>scrollTreshold){$block.addClass(fixedClass)}else{$block.removeClass(fixedClass)}})

[Сергей-Сергей]

Пожалуйста, вот код:

Спасибо большое! За ответ! Но не могли бы вы поподробнее! Как вставить его? Для особо одаренных Благодарю! А то я запутался как вывести все это в блок.?

[LittlePony]

А прочитайте код. Он снабжён комментариями.
Прочитайте ответы выше. И станет вообще всё предельно ясно.
К тому же вы говорите, что учитесь. А это значит, что не приемлете варианта, чтобы за вас сделали всё-всё-всё. В этом ваши принципы верны. Да и другие тоже не любят халявщиков. И поскольку вы не такой, то конечно же прочитаете о том свойстве css, на котором подобные решения реализованы, и отпишетесь о своих успехах.

[Сергей-Сергей]

Наконец то сделал! Перерыл несколько сотен сайтов и наконец то нашел, что искал! Фиксированный блок, останавливающийся при прокрутке!

Реализовал на этом сайте Паук-Портал.ru
При прокрутке, в правой колонке, последний блок скроллится и останавливается!

Если, кому то надо, код скрипта смотрите в исходном коде сайта. Или спрашивайте здесь, постараюсь ответить и помочь.

P.S. Сайт в разработке, не судите строго.

.

[LittlePony]

Сергей-Сергей, зря вы пишете в js явно то, что должно быть в css.
Скрипт должен всего лишь добавлять класс, в котором уже описаны свойства position:fixed;top:30px.