Question

我只是js的初学者我有这个代码，它工作正常

$(window).scroll(function() {
    if ($(this).scrollTop() >=800) {$("#ascrail2001").css("margin-top", "0px");
    } else {$("#ascrail2001").css("margin-top", "33px");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我需要在这里让它变得顺畅或逐个像素像这样但很简单

$(window).scroll(function() {
    if ($(this).scrollTop() >=700) {$("#ascrail2001").css("margin-top", "0px");
    } else if ($(this).scrollTop() >=800) {$("#ascrail2001").css("margin-top", "1px");
    } else if ($(this).scrollTop() >=900) {$("#ascrail2001").css("margin-top", "2px");
    } else if ($(this).scrollTop() >=1000) {$("#ascrail2001").css("margin-top", "3px");
    } else if ($(this).scrollTop() >=1100) {$("#ascrail2001").css("margin-top", "4px");
    } else if ($(this).scrollTop() >=1200) {$("#ascrail2001").css("margin-top", "5px");
    } else if ($(this).scrollTop() >=1300) {$("#ascrail2001").css("margin-top", "6px");
    } else if ($(this).scrollTop() >=1400) {$("#ascrail2001").css("margin-top", "7px");
    } else if ($(this).scrollTop() >=1500) {$("#ascrail2001").css("margin-top", "8px");
    } else if ($(this).scrollTop() >=1600) {$("#ascrail2001").css("margin-top", "9px");
    } else if ($(this).scrollTop() >=1700) {$("#ascrail2001").css("margin-top", "10px");
    } else if ($(this).scrollTop() >=1800) {$("#ascrail2001").css("margin-top", "11px");
    } else if ($(this).scrollTop() >=1900) {$("#ascrail2001").css("margin-top", "12px");
    } else if ($(this).scrollTop() >=2000) {$("#ascrail2001").css("margin-top", "13px");
    } else if ($(this).scrollTop() >=2100) {$("#ascrail2001").css("margin-top", "14px");
    } else if ($(this).scrollTop() >=2200) {$("#ascrail2001").css("margin-top", "16px");
    } else if ($(this).scrollTop() >=2300) {$("#ascrail2001").css("margin-top", "17px");
    } else if ($(this).scrollTop() >=2400) {$("#ascrail2001").css("margin-top", "18px");
    } else if ($(this).scrollTop() >=2500) {$("#ascrail2001").css("margin-top", "19px");
    } else if ($(this).scrollTop() >=2600) {$("#ascrail2001").css("margin-top", "20px");
    } else if ($(this).scrollTop() >=2700) {$("#ascrail2001").css("margin-top", "21px");
    } else if ($(this).scrollTop() >=2800) {$("#ascrail2001").css("margin-top", "22px");
    } else if ($(this).scrollTop() >=2900) {$("#ascrail2001").css("margin-top", "23px");
    } else if ($(this).scrollTop() >=3000) {$("#ascrail2001").css("margin-top", "24px");
    } else if ($(this).scrollTop() >=3100) {$("#ascrail2001").css("margin-top", "25px");
    } else if ($(this).scrollTop() >=3200) {$("#ascrail2001").css("margin-top", "26px");
    } else if ($(this).scrollTop() >=3300) {$("#ascrail2001").css("margin-top", "27px");
    } else if ($(this).scrollTop() >=3400) {$("#ascrail2001").css("margin-top", "28px");
    } else if ($(this).scrollTop() >=3500) {$("#ascrail2001").css("margin-top", "29px");
    } else if ($(this).scrollTop() >=3600) {$("#ascrail2001").css("margin-top", "30px");
    } else if ($(this).scrollTop() >=3700) {$("#ascrail2001").css("margin-top", "31px");
    } else if ($(this).scrollTop() >=3800) {$("#ascrail2001").css("margin-top", "32px");
    } else{$("#ascrail2001").css("margin-top", "33px");
    }
});

顺便说一下，上面的代码没有按照我的意愿运行提前谢谢

Answer 1

这是处理动画的一种非常糟糕的方法，因为多次滚动会触发多个重叠事件。

你最好检查jQuery animate让jQuery处理动画。

正确实施的例子

$(item).stop().animate({
    top: '100px'; //You can make this dynamic
});

js - div的平滑运动

1 个答案: