Hello there, I am completely new to the world of web development and particularly to using JavaScript and jQuery. I am interested in learning how to adjust the speed at which my Sidebar scrolls down as the user navigates through the page.
Here is the jQuery code for 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 for 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;
}