In order to implement a feature where the menu sticks to the top when scrolling down, you can use the following JS code. You can view a live example of this functionality on this Plunker by widening the preview window to see the columns side by side.
window.addEventListener("scroll", handleScroll);
function handleScroll() {
const $panel = $(".menu")[0];
if ($(this).scrollTop() > 90) {
$panel.classList.add("sticky");
} else {
$panel.classList.remove("sticky");
}
}.navbar {
background-color: #fff;
border-bottom: 1px solid;
font-size: 48px;
line-height: 48px;
position: fixed;
}
.contents {
margin-top: 55px;
}
.menu.sticky {
bottom: 60px;
right: 0;
position: fixed;
top: 55px;
width: 31.491712707182323%;
}
.menu.sticky .tab-content {
overflow: auto;
}
.menu .tab-content {
padding: 20px;
}
.menu button {
margin-top: 20px;
}
.btn.pull-right {
margin: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-fixed-top">NAVBAR</div>
<div class="contents">
...
...
<ul>
...
</ul>
</div>
</div>
</div>
</div>If you want the content of the active tab in the sticky menu to be scrollable with the bottom aligning with the visible window, you can refer to these images for reference:
https://i.sstatic.net/rwNxP.png
As you continue scrolling, the scrollable area in the tab should end up matching the parent's bottom as shown here:
https://i.sstatic.net/lcetO.png
To achieve this effect, you need to make the tab content scrollable and adjust the JavaScript accordingly to ensure the menu is positioned correctly at the bottom.