Question posted in 
I want the div "Scrollable" to stay within the div "Animation-Menu", but I tried several ways & came to no result.
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<div id="animation-menu">
<nav class="navbar navbar-dark bg-dark justify-content-center">
<span class="navbar-brand">Animationen</span>
</nav>
<div id="scrollable">
<div class="search-bar ml-3 mr-3 mb-3">
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1">Animation suchen</label>
</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-2" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
<div class="d-flex p-2 grey lighten-1" id="animation-card">
<div class="text-center ml-3">Lorem ipsum</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
<script>
Scrollbar.init(document.querySelector('#scrollable'));
</script>
</body>
</html>
Here is my style.css file
#animation-menu {
left: 0;
top: 0;
margin: 2rem;
width: 25rem;
height: 30rem;
background-color: rgba(33, 33, 33, 0.8);
position:fixed;
overflow:hidden;
}
#animation-menu > nav {
text-align: center;
}
.animation {
color: white;
}
.d-flex {
opacity: 0.8;
}
#scrollable {
overflow-y: auto;
}
Maybe you can see that I also use an own scrollbar. But this should be within the div "animation-menu". The navigation bar should be fixed at the top & only the div "scrollable" should be scrollable.
2
Answers
For navigation bar to be fixed at the top, you should add
position:fixedproperty to the navbar.See the snippet in full page.
Let me know if you have any other things in mind.
if you just assigned a height to #scrollable, I think it will fix your problem
to
see the edited code