时间戳

首页 > 解决方案 > 使用 Jquery 提高侧边栏的滚动速度

javascript - 使用 Jquery 提高侧边栏的滚动速度

问题描述

Heyy，我对 Web 开发非常陌生，尤其是使用 JavaScript 和 Jquery。我想知道如何提高边栏与用户一起向下滚动的速度。

侧边栏滚动效果的jQuery代码：

$(function() {

var $sidebar   = $(".aside"), 
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 100;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        });
    } else {
        $sidebar.stop().animate({
            marginTop: 60
        });
    }
});

});

我的侧边栏的 CSS 代码：

.aside {
    display:inline-block;
    float:right;
    background: red;
    width: 330px;
    min-height: 40vw;
    margin-right: 130px;
    margin-top: 60px;
    padding: 0 20px;
    box-shadow: inset 0 -1px 0 rgb( 79 131 170 / 20%), 0 0 30px rgb(0 0 0 / 7%);
    border-radius: 5px;
}

标签： javascripthtmljquerycss

解决方案

默认情况下，该animate()方法的动画速度为400。并且要调整动画速度，可以手动设置数值。

你可以这样做：

...
$sidebar.stop().animate({
   marginTop: $window.scrollTop() - offset.top + topPadding
}, 100);
...

我将其设置为100，但您可以选择将其设置为您想要的任何值。

推荐阅读