Javascript или Jquery: выделите элемент Фиксированная позиция

Question

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

используйте position:sticky, чтобы следовать за свитком.

Вот объяснение статьи.

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

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

с демонстрационная версия с липким положением