Javascript или JQuery: прокрутить до Фиксированная позиция div

Question

Я хочу, чтобы html div прокручивался, когда пользователь прокручивается вниз по странице, и он достигнет фиксированной позиции, когда заканчивается родительский тег. Например: - См. Эту ссылку http://www.9gag.com/ У них есть много сообщений на одной странице. Когда мы прокручиваем одно сообщение и переходим к концу первого сообщения, кнопки заголовка и общего доступа становятся фиксированными, а затем вторая позиция делает то же самое и для последующих сообщений. Просто так. Как мы можем это сделать в JQuery, или в javascript, или в css.

Answer 1

$(window).scrollTop() даст вам количество пикселей, прокрученных в браузере, $('postcontainer').offset() предоставит вам позиции x, y почтового контейнера.

Таким образом, если вы связываете событие с $(window).scroll() или с mousescroll, вы можете проверить, является ли постконтейнер offset().top меньше, чем window.scrollTop. Если это произойдет, вы начнете перемещать элемент по отношению к почтовому контейнеру. При этом вам нужно отслеживать высоту почтового контейнера и высоту движущегося элемента, чтобы убедиться, что он не опускается ниже дна контейнера.

Итак, если postcontainer.height - movingelement.position().top >= movingelement.height(), то вам необходимо зафиксировать положение движущегося элемента. Выполняйте обратное во время прокрутки.

Надеюсь, это заставит вас думать и начать выкидывать какой-то код.

Answer 2

Возможно, вы хотите попробовать этот плагин: http://labs.anthonygarand.com/sticky/ Sticky - это плагин jQuery, который дает вам возможность сделать любой элемент на вашей странице всегда видимым, если элемент будет плавать, когда достигнет предела.

Answer 3

Это решение проблемы с помощью простого свойства css.

position:sticky следует за свитком.

Здесь объясняется статья.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

и старый способ сделать это demo

с sticky position demo