Как заставить <div>двигаться вверх и вниз при прокрутке страницы?

Question

Как я могу заставить элемент div перемещаться вверх и вниз по странице, когда пользователь прокручивает страницу? (где этот элемент всегда виден)

Answer 1

Вы хотите применить фиксированное свойство к стилю позиции элемента.

position: fixed;

С каким браузером вы работаете? Не все браузеры поддерживают фиксированное свойство. Узнайте больше о том, кто поддерживает это, кто нет, и некоторые работают здесь

http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html

Answer 2

Только для более оживленного и симпатичного решения:

$(window).scroll(function(){
  $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

И ручка для тех, кто хочет посмотреть: http://codepen.io/think123/full/mAxlb, и вилка: http://codepen.io/think123/pen/mAxlb

Обновление: и не анимированное решение jQuery:

$(window).scroll(function(){
  $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});

Answer 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");
}

Answer 4

Вот код 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);
        });
    });

Answer 5

Просто добавьте position: fixed; в стиле div.

Я проверил, и он отлично работает в моем коде.

Answer 6

Возможно, вы захотите проверить недавнюю статью Реми Шарпа о фиксированных плавающих элементах в jQuery for Designers , в которой есть хорошее видео и описание того, как применить этот эффект в клиентском скрипте