Javascript tween/move元素，如果可能，在用户滚动时从类中移动/移动到类中

我试图在用户滚动时移动一个元素

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

我希望只有在某个条件为真时，元素才能随滚动一起移动

因此，如果

hasScrolledUp

和

scrollingUp

都为真，我希望元素在用户向上滚动时向下移动

然后，如果

downpafterup

为true，我希望元素在用户向下滚动时向上移动

下面是我设置这些布尔值的代码：

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

---

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

我建议查看以下示例：

在Firefox中的行为很奇怪，由于平滑的滚动，它被触发了很多次，但是它可以工作，下面是一个例子：

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "35px",
    left: "35px" });

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        scrollTop = target.scrollTop || window.pageYOffset,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        lastScrollTop = $(target).data("lastScrollTop") || 0,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }
    $("#test").html(scrollText +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
    //saves the current scrollTop
    $(target).data("lastScrollTop", scrollTop);
});

//创建一个元素来打印滚动位置
$（“
”）.appendTo（“body”）.css({
填充：“5px7px”，
背景：“e9e9e9”，
位置：“固定”，
底部：“35px”，
左：“35px”}）；
//绑定“滚动”事件
$（窗口）。滚动（功能（e）{
var target=e.currentTarget，
scrollTop=target.scrollTop | | window.pageYOffset，
scrollHeight=target.scrollHeight | | document.body.scrollHeight，
lastScrollTop=$（目标）.data（“lastScrollTop”）| | 0，
scrollText=“”；
如果（scrollTop>lastScrollTop）{
scrollText=“向下滚动”；
}否则{
scrollText=“向上滚动”；
}
$（“#测试”）.html（滚动文本+
“
scrollTop:”+scrollTop+

lastScrollTop:“+lastScrollTop”；
if（scrollHeight-scrollTop===$（目标）.innerHeight（）{
控制台日志（“► 卷轴末端“）；
}
//保存当前的滚动条
$（目标）.data（“lastScrollTop”，scrollTop）；
});

在jherax的答案上添加了一个函数，可以移动一个位置：固定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);
});

函数ScrollMoveDiv（scrollTop）{
var windowHeight=$（window.height（）；
var totalHeight=$（document）.height（）-windowHeight；
var MovePercentage=（scrollTop*100）/totalHeight；
返回百分比+“%”；
}
//附加“滚动”事件
$（窗口）。滚动（功能（e）{
var body=document.body，
scrollTop=$（“html”）.scrollTop（）| |$（正文）.scrollTop（），
lastScrollTop=$（this）.data（“lastScrollTop”）| | 0，
scrollText=“”；
如果（scrollTop>lastScrollTop）{
scrollText=“向下滚动”；
}否则{
scrollText=“向上滚动”；
}
var MoveDistance=ScrollMoveDiv（scrollTop）；
$（'.moving'）.css（'bottom'，MoveDistance）；
$（“#测试”）.html（滚动文本+

lastScrollTop:+lastScrollTop+
“
currentScrollTop:”+scrollTop）；
//保存当前的滚动条
$（this）.data（“lastScrollTop”，scrollTop）；
});

JSFiddle：