Как я могу сделать элемент div перемещаться вверх и вниз по странице, когда пользователь прокручивает страницу? (где этот элемент всегда видим)
Как сделать перемещение <div> вверх и вниз при прокрутке страницы?
Ответ 1
Вы хотите применить фиксированное свойство к стилю позиции элемента.
position: fixed;
В каком браузере вы работаете? Не все браузеры поддерживают фиксированное свойство. Узнайте больше о том, кто его поддерживает, кто не работает и не работает здесь.
http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html
Ответ 2
Просто для более анимированного и симпатичного решения:
$(window).scroll(function(){
$("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
И ручка для тех, кто хочет видеть: http://codepen.io/think123/full/mAxlb и fork: http://codepen.io/think123/pen/mAxlb
Обновление: и неанимированное решение jQuery:
$(window).scroll(function(){
$("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});
Ответ 3
используя только position:fixed
, прекрасно, когда у вас нет заголовка или логотипа в верхней части страницы. Это решение будет учитывать то, как далеко прокручивается окно, и перемещает div при прокрутке вашего заголовка. Затем он снова зафиксируется на месте, когда вы снова вернетесь наверх.
if($(window).scrollTop() > Height_of_Header){
//begin to scroll
$("#div").css("position","fixed");
$("#div").css("top",0);
}
else{
//lock it back into place
$("#div").css("position","relative");
}
Ответ 4
Просто добавьте position: fixed;
в свой стиль div.
Я проверил и отлично работал в своем коде.
Ответ 5
Вот код JQuery
$(document).ready(function () {
var el = $('#Container');
var originalelpos = el.offset().top; // take it where it originally is on the page
//run on scroll
$(window).scroll(function () {
var el = $('#Container'); // important! (local)
var elpos = el.offset().top; // take current situation
var windowpos = $(window).scrollTop();
var finaldestination = windowpos + originalelpos;
el.stop().animate({ 'top': finaldestination }, 1000);
});
});
Ответ 6
Возможно, вы захотите проверить Remy Sharp недавняя статья о фиксированных плавающих элементах в jQuery для дизайнеров, в которой есть хорошее видео и запись на как применить этот эффект в клиенте script