Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2012, 15:18
Интересующийся
Отправить личное сообщение для region029 Посмотреть профиль Найти все сообщения от region029
 
Регистрация: 15.03.2012
Сообщений: 17

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

На одном форуме дали ссылку на вот этот зарубежный ресурс imakewebthings.com/jquery-waypoints/#examples, но немогу разобраться, код написан сразу для 4-х функций, а мне только 1 нужна (Sticky Elements)
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2012, 13:58
Аспирант
Отправить личное сообщение для skfyann Посмотреть профиль Найти все сообщения от skfyann
 
Регистрация: 27.12.2011
Сообщений: 90

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

Либо конкретные вопросы, либо в раздел РАБОТА.
Ответить с цитированием
  #3 (permalink)  
Старый 17.03.2012, 12:18
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

вообще-то это делается с помощью css, свойство называется position и имеет значение fixed.
Ответить с цитированием
  #4 (permalink)  
Старый 17.03.2012, 22:51
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

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

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

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

Успехов.
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2012, 17:21
Интересующийся
Отправить личное сообщение для Сергей-Сергей Посмотреть профиль Найти все сообщения от Сергей-Сергей
 
Регистрация: 08.09.2012
Сообщений: 10

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

.

Последний раз редактировалось Сергей-Сергей, 08.09.2012 в 17:33.
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2012, 17:48
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 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)}})
Ответить с цитированием
  #7 (permalink)  
Старый 08.09.2012, 19:28
Интересующийся
Отправить личное сообщение для Сергей-Сергей Посмотреть профиль Найти все сообщения от Сергей-Сергей
 
Регистрация: 08.09.2012
Сообщений: 10

Сообщение от LittlePony Посмотреть сообщение
Пожалуйста, вот код:

Спасибо большое! За ответ! Но не могли бы вы поподробнее! Как вставить его? Для особо одаренных Благодарю! А то я запутался как вывести все это в блок.?
Ответить с цитированием
  #8 (permalink)  
Старый 08.09.2012, 22:32
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

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

Последний раз редактировалось LittlePony, 08.09.2012 в 22:34.
Ответить с цитированием
  #9 (permalink)  
Старый 10.09.2012, 17:59
Интересующийся
Отправить личное сообщение для Сергей-Сергей Посмотреть профиль Найти все сообщения от Сергей-Сергей
 
Регистрация: 08.09.2012
Сообщений: 10

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

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

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

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

.

Последний раз редактировалось Сергей-Сергей, 10.09.2012 в 18:09.
Ответить с цитированием
  #10 (permalink)  
Старый 10.09.2012, 19:26
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение длинны блока при заполнении Axios Элементы интерфейса 6 27.01.2012 15:56
перемещение при переключение табов abuGabi Элементы интерфейса 2 12.10.2011 12:15
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13