Изменить положение Div Y с помощью колесика мыши и боковой панели - PullRequest
Новая
       16

Изменить положение Div Y с помощью колесика мыши и боковой панели

2 голосов
/ 13 июня 2011

Мне нужно, чтобы при прокрутке колесиком мыши или боковой панелью вниз или вверх мой div постепенно изменял положение Y (например, на 50 пикселей вверх или вниз). Мне нужно это в Javascript / Jquery.

Я пробую этот код, но он работает только для прокрутки вниз (функция прокрутки вниз и вверх работает хорошо, работает только анимационная часть):

ОБНОВЛЕНИЕ: 

 var sidebarScrollTop = 0;

    $(document).ready(function() {

    sidebarScrollTop = $("body").offset();
    $(window).scroll(function () 
    { 
        var docScrollTop = $('body,html').scrollTop();
        if(docScrollTop > sidebarScrollTop.top)
        {


        $("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
        }
        else
        {
        $("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );

        }
    });
    });

    $(window).resize(function() 
    {
    sidebarScrollTop = $("#legend").offset().top;
    });

    $(document).resize(function() 
    {
    sidebarScrollTop = $("#legend").offset().top;

});

Спасибо

Ответы [ 2 ]

1 голос
/ 13 июня 2011

Вы можете использовать 

$(window).scroll(function() {
   // Your scroll code here
});

для захвата, когда пользователь прокручивает страницу.

Далее вы хотите изменить y-значение div. Если div позиционируется как абсолют, это просто меняет его верхнее значение. 

$('my-div').top = original-top-value + $(window).pageYOffset;
0 голосов
/ 13 июня 2011

Я считаю, что вам нужно, чтобы div всегда отображался, даже когда пользователь прокручивает страницу вниз.Если это так, то это можно сделать только с помощью CSS: 

div {
  position: fixed;
  z-index: 100;
  top: 100px;
  left: 100px;
}

Значения z-index, top и left являются фиктивными значениями.Замените их на свои.

ОБНОВЛЕНИЕ:

Поскольку решение CSS не будет работать для вас, вот рабочий пример писателя в JS: http://jsfiddle.net/qCtt5/

...