Increase scroll speed of my sidebar with Jquery

user_14953049 0
Viewed 87

Heyy, I'm really new to web development and more specifically using JavaScript and Jquery. I would like to know how to increase the speed at which my Sidebar scrolls down along with the user.

Jquery Code of the sidebar scrolling effect:

$(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 Code of my Sidebar:

.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;
}
css html jquery javascript
1 Answers

By default, the animation speed of the animate() method is 400. And to adjust the animation speed, you can manually set the value.

You can do it like this:

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

I set it to 100, but you can choose to set it to whatever value you want.

user_135734440
Related