javascript - 当用户滚动时，补间/移动元素(如果可能的话)从/到一个类

Question

我正在尝试在用户滚动时移动元素。

如果可能，向上滚动到一个类，向下滚动到一个类。

我希望元素仅在特定条件成立时才随滚动移动。

因此，如果 hasScrolledUp 和 scrollingUp 都为 true，我希望元素在用户向上滚动时向下移动。

然后，如果 downAfterUp 为 true，我希望元素在用户向下滚动时向上移动。

这是我设置这些 bool 值的代码:

    var lScrollTop = 0;
    var hasScrolledUp = false;
    var scrollingUp = false;
    var downAfterUp = false;
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop>lScrollTop){
            hasScrolledUp = true;
            scrollingUp = true;
        }
        else{
            if(scrollingUp) scrollingUp = false;
            if(hasScrolledUp) downAfterUp = true;
        }
        lScrollTop = scrollTop;
    });

我将非常感谢任何和所有的帮助!

Answer 1

添加到jherax的答案中，我添加了一个函数，该函数将在每次滚动时将position:fixed div移动一定百分比。

function ScrollMoveDiv(scrollTop){
var windowHeight = $(window).height();
var totalHeight = $(document).height() - windowHeight;
var MovePercentage = (scrollTop * 100)/totalHeight;
return MovePercentage+"%";
}

//attaches the "scroll" event
$(window).scroll(function (e) {
    var body = document.body,
        scrollTop = $("html").scrollTop() || $(body).scrollTop(),
        lastScrollTop = $(this).data("lastScrollTop") || 0,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    var MoveDistance = ScrollMoveDiv(scrollTop);
    $('.moving').css('bottom',MoveDistance);

    $("#test").html(scrollText +
      "<br>lastScrollTop: " + lastScrollTop +
      "<br>currentScrollTop: " + scrollTop);

    //saves the current scrollTop
    $(this).data("lastScrollTop", scrollTop);
});

JSFiddle:http://jsfiddle.net/8MJnB/