Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перемещение блока при скроллинге (https://javascript.ru/forum/jquery/26626-peremeshhenie-bloka-pri-skrollinge.html)

region029 15.03.2012 15:18

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

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

skfyann 16.03.2012 13:58

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

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

melky 17.03.2012 12:18

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

n1ko 17.03.2012 22:51

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

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

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

Успехов.

Сергей-Сергей 08.09.2012 17:21

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

.

LittlePony 08.09.2012 17:48

Пожалуйста, вот код:
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

Цитата:

Сообщение от LittlePony (Сообщение 203654)
Пожалуйста, вот код:


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

LittlePony 08.09.2012 22:32

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

Сергей-Сергей 10.09.2012 17:59

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

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

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

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

.

LittlePony 10.09.2012 19:26

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


Часовой пояс GMT +3, время: 00:32.