How to make sidebar (with toggle option) fixed (without using actual "fixed" property) with javascript?

[Markob15]

I’m a beginner and I’m stuck. And I would really use some help. Have two questions regarding js. Namely, I have a sidebar on the left that has a toggle option. In order to solve the problem of keeping my sidebar in sight when scrolling, I added javascript code that constantly raises it to the top of the page. But that doesn't seem like the optimal solution.

1. Is there a way to use javascript to set the menu to be fixed to the top of the page whenever the toggle is open.

Here is the following js code:


$(function() {

var $sidebar = $("#menu"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 60;

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

});




Here is the html:

<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper" style="background-image: url('geogebra6.png'); scroll-margin: 120px;"> <!--Dodao side baru scroll marginu -->
<div class="sidebar-heading">Sadržaj</div>
<div class="list-group list-group-flush" style="background-image: url('geogebra1.png');" id="menu">
<a href="#" class="list-group-item list-group-item-action bg-light" onclick="callmymethod2(event)"><b>1. Uvod</b></a>
<a href="#" class="list-group-item list-group-item-action bg-light" onclick="callmymethod1(event)"><b>2. Realni nizovi </b></a>
<!-- class="dropdown-toggle" style="color: black; "-->
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="list-group-item list-group-item-action bg-light" onclick="callmymethod3(event)"><b>3. Funkcionalni nizovi</b></a>
<ul class="collapse list-unstyled" id="homeSubmenu" >
<li>
<a href="#" class="list-group-item list-group-item-action bg-light" onclick="callmymethod4(event)"><b>3.1. Obična konvergencija</b></a>
</li>
<li>
<a href="#" class="list-group-item list-group-item-action bg-light" onclick="callmymethod5(event)"><b>3.2. Ravnomerna konvergencija</b></a>
</li>

</ul>

</div>
</div>

Of course, using position:fixed does not get the job done because it breaks the flow and mu side bar has the toggle option.

1. While we are here, is there any way of editing this line of code to make sidebar closed by default and then to open when clicked on the button? I've tried several different solutions but none of them seems optimal.

Here is the code in question:


<!-- Menu Toggle Script -->

// $("#wrapper").toggleClass("toggled");
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});




Here is the actual link of the site:

http://alas.matf.bg.ac.rs/~ml05184/

Here is the original post I've posted on stackoverflow:

How to make sidebar fixed (without using actual "fixed" property) with javascript?

I’m a beginner and I’m stuck. And I would really use some help. Have two questions regarding js. Namely, I have a sidebar on the left that has a toggle option. In order to solve the problem of keep...

stackoverflow.com