CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
ray
ray

Reputation: 13

Toggle Sidebar with sticky header and footer

I would like to be able to have a side bar that can be toggled in and out on a button press. However, I'd want this sidebar to go with the main content of the page and fit between a sticky header and a sticky footer.

My problem is that when I scroll the sidebar stays fixed. I want the sidebar and page content to be able to scroll together and the header disappear. Then the page content will scroll while the header stays where it is. Then once the bottom of the page is reached the footer comes in which will shrink the bottom of the sidebar. If there is overflow in the side bar then the sidebar should be scrollable.

I have a nearly working example using bootstrap and simple-side bar template here: https://jsfiddle.net/co7080j6/. The only problem is that the side bar doesn't adjust it's position with the sticky header and footer.

The html I'm using is here: 

<body>
<!-- Navbar --> 
<nav class="navbar navbar-inverse" style="margin: 0;">
  <div class="container">
    <a class="navbar-brand" href="#">Project name</a>
  </div>
</nav>
<!-- /#navbar -->
<div class="container-full" >
  <div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          <a href="#"> Start Bootstrap</a>
        </li>
        <li>
          <a href="#">Events</a>
        </li>
      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper" style="height: 900px">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <a href="#menu-toggle" class="btn btn-default" 
                id="menu-toggle">
              Toggle Menu
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- /#page-content-wrapper -->
  </div>
  <!-- /#wrapper -->
</div>
<!-- container-full -->
<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>
</body>

And besides bootstrap and simple sidebar (I removed z-index on the sidebar) I'm also I'm also using: 

/*MY CSS*/
.container-full {
  margin: 0 auto;
  width: 100%;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #333;
}

*I'd also like it if the header came into view any time the window scrolled up, but I think I can get that myself once this is resolved.

Upvotes: 1

Views: 3140

Answers (1)

ericgrosse
ericgrosse

Reputation: 1510

This is more of a CSS issue than anything. If you make the following changes to the CSS file, you get the functionality you desire.

#sidebar-wrapper {
    position: absolute;
    height: 90%;
}

.sidebar-nav {
    position: fixed;
    top: 55px;
    left: 30px;
}

Also need to include a little extra JQuery to get around the fact that the sidebar-nav text doesn't hide when position is set to fixed.

$(document).ready(function() {
    $('#menu-toggle').click(function() {
       $('.sidebar-nav').fadeToggle(300); 
    });
});

Here's a JSFiddle

I'm not 100% sure you wanted the sidebar text to scroll or stay in place. If you want it to stay put, simply remove the .sidebar-nav CSS changes I made. And here's the JSFiddle for that.

Upvotes: 1

Related Questions