GenXCoders GenXCoders - 6 months ago 33
CSS Question

Fix Bootstrap Navbar to top on scrolling


  1. I have a
    div (named=status bar)
    at the top of the page with
    height = 25px
    ,
    top:0
    and
    position: fixed
    .

  2. I want to place a bootstrap
    navbar
    (with transparent background)
    100px
    below this status bar.

  3. When the page is scrolled, the
    navbar
    scrolls along and touches the status bar and:
    3.1. gets fixed below the status bar.
    3.2. changes its background color to
    red (#ff0000)
    .
    3.3. rest of the page scrolls down.

  4. When the page is scrolled up, the position of the
    navbar
    and status bar remains fixed till the scroll reaches almost to the top of the browser.

  5. When the top of the browser is reached, the status bar remains at its position as in #1. And the
    navbar
    scrolls and gets set at a distance of
    100px
    from the status bar.



HTML (Status Bar)



<div class="genxcoders-status-bar"> <div class="genxcoders-left genxcoders-fc-white genxcoders-fw-500">
<span id="genxcoders-date"></span>
</div>
<div class="genxcoders-center">
Support: <i class="fa fa-phone"></i> +91-712-606 GENX
</div>
<div class="genxcoders-right">
<ul class="genxcoders-status-bar-social">
<a href="#"><li><i class="fa fa-facebook-f"></i></li></a>
<a href="#"><li><i class="fa fa-twitter"></i></li></a>
<a href="#"><li><i class="fa fa-linkedin"></i></li></a>
<a href="#"><li><i class="fa fa-youtube-play"></i></li></a>
</ul>
</div> </div>




HTML (Navbar)

<div class="nav-container" id="navigation">
<div id="genxcoders" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">BlueGas</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about-us">About Us</a></li>
<li class="dropdown">
<a href="/products" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>


CSS (Status Bar)

/* Status Bar */

.genxcoders-status-bar { width: 100%; height: 25px; background-color: #1976d2; position: fixed; top: 0; z-index: 9999; }

.genxcoders-status-bar > .genxcoders-left, .genxcoders-status-bar > .genxcoders-center, .genxcoders-status-bar > .genxcoders-right { width: 33.33%; height: 25px; line-height: 25px; font-size: 12px; float: left; text-align: center; color: #ffffff; }

.genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social { list-style: none; margin-left:
-30px; } .genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social > a > li { color: #ffffff; display: inline-block; margin: auto 10px; }


/* Status Bar */

CSS Navbar
/* App Bar */

.nav-container { margin-top:100px; width: 100%; height: 50px;
} .nav-container > #genxcoders.navbar-default .navbar-brand {
color: rgba(33, 33, 33, 1); } .nav-container > #genxcoders.navbar-default {
font-size: 15px;
/*background-color: rgba(255, 255, 255, 1);*/ background-color: transparent;
border-width: 0px;
border-radius: 0px; } .nav-container > #genxcoders.navbar-default .navbar-nav>li>a {
color: rgba(33, 33, 33, 1);
/*background-color: rgba(255, 255, 255, 1);*/ background-color: transparent; } .nav-container > #genxcoders.navbar-default .navbar-nav>li>a:hover, .nav-container > #genxcoders.navbar-default .navbar-nav>li>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(3, 169, 244, 1); } .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a, .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:hover, .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(25, 118, 210, 1); } .nav-container > #genxcoders.navbar-default .navbar-toggle {
border-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle:hover, .nav-container > #genxcoders.navbar-default .navbar-toggle:focus {
background-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle .icon-bar {
background-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle:hover .icon-bar, .nav-container > #genxcoders.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #ffffff; }


/* App Bar */

FIDDLE

Answer Source

There are a number of problems with your fiddle, some more serious than others:

  • you are loading jQuery over http:// instead of https:// and jsFiddle blocks it.
  • you are checking window.scrollTop() against #navigation.offset() but you change #navigations offset() using CSS and it causes the bar to flicker between states. Compare it to a hard value, like 100px (which is the margin top of your #navigation when it's not fixed, so it works as intended.
  • you define var elementPosition outside the scroll() function, so it doesn't get updated on scroll
  • your .scroll() function is way too heavy. Just append a class (fixed?) to #navigation and place all of the CSS inside a #navigation.fixed { } declaration, in your CSS. I haven't done this last point in the updated fiddle, but I highly recommend it.

Your updated fiddle.