CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1888

Fixed sidenav bar w/ non-fixed header leaves gap at the top after scrolling

The page I'm working on has a header, side nav controls (fixed), and of course content.

The problem I',m running into is that if the content is long enough to make the user scroll, the fixed side nav bar stays fixed but leaves a gap the size of the header above it.

This seems like it should be a simple fix and I might just be over looking something. I'd prefer to do it with pure css if possible or plain js with no jQuery.

fiddle example, might have to make the 'result' area wider to see the side nav. 

<body>
 <nav> ... </nav>
 <div class="wrapper">
  <div class="sidebar-wrapper">...</div>
  <div class="page-content-wrapper">...</div> 
 </div>
</body>

The css

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

Upvotes: 0

Views: 1097

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

What you should do is make the element absolutely positioned before you scroll to the top of the sidebar, then once you hit that scroll point, affix the sidebar to the top of the window.

You can do this by measuring the height of the header/nav bar or note where the beginning of the content area is, and once a user scrolls past that point, apply a class to the sidebar that makes it fixed.

$sidebar = $('#sidebar-wrapper');

$(window).scroll(function() {
	if ($(window).scrollTop() >= $('#page-content-wrapper').offset().top) {
  	$sidebar.addClass('fixed');
  } else {
  	$sidebar.removeClass('fixed');
  }
})
body {
    overflow-x: hidden;
}

/* Toggle Styles */
.navbar{
  height: 70px; 
  margin: 0; 
}
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute;
    left: 250px;
    width: 0;
    top: auto;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper.fixed {
  position: fixed;
  top: 0;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}
/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #3572b0;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #204469;
    background: #dedede;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #sidebar-wrapper {
        width: 250px;
    }
    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <h1>Navbar header</h1>
        </div>
    </div>
</nav>
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->
</div>

</body>

Upvotes: 0

Khalid T.
Khalid T.

Reputation: 10567

Can't be done with CSS only. Here is the Javascript (using jQuery):

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop <= 70)
        $('.sidebar-wrapper').css('top', 70 - scrollTop);
    else
        $('.sidebar-wrapper').css('top', 0);
});

Upvotes: 1

Related Questions