1

Bootstrap 3 here and here's my jsFiddle. I really like my header navbar, but would like to tweak it so that it 'snaps' or 'pins' to the top of the page as the user views, almost exactly like they do it on Rancher. With the only difference being, they transition from a transparent background to a black one, and I just want to stick with a solid gray background at all times.

Looking at that page source, I can't quite lock in on where the trick is because most of their JS is pretty heavily minified. Any ideas as to how I could achieve this?

Maybe some JS magic like so (?):

$(window).scroll(function(){
    var fixIT = $(this).scrollTop() >= navPos;
    var setPos = fixIT ? 'fixed' : 'relative' ;
    var logoSH = fixIT ? 'show' : 'hide' ;

    $('#nav').css({position: setPos});
    $('#mini-logo')[logoSH](300);
});

Thoughts?

smeeb
  • 27,777
  • 57
  • 250
  • 447

3 Answers3

4

If you don't want to have the transition in the background of your navbar then there is no need to add js in your code. You can do it simple with media query event and css.

On the snippet above I wrap all your navbar with a class "checkmate" and added a media query for the "view" when window is on 640px or less. 

.acLogo {
    background-image : url("http://placehold.it/120x50");
    background-size: 100%;
    height: 50px;
    width: 120px;
    padding-top: 15px;
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall {
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help {
    margin-top: 10px;
}
.new-account {
    display: block;
    margin-top: 10px;
}
img.user-summary {
    max-width: 100%;
    height: auto;
}
div.user-summary {
    margin: 10px auto;
}
div.user-summary > img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 5px;
}
div.user-name {
    margin: 15px 0 0 0;
    font-style: italic;
    display: block;
}
div.user-status {
    font-weight: bold;
}

.checkmate {
    position:fixed!important;
    width:100%;
    margin:0 auto;
    z-index: 99;
}

.the_content {
    position: relative;
    top:130px;
}

@media only screen and (max-width:767px) {

    .the_content {
        position: relative;
        top:400px;
    }
}
@media only screen and (max-width:640px) {

    .checkmate {
        position: relative!important;
    }
    .the_content {
        position: relative;
        top:0px;
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index,follow" />
    <meta name="title" content="My App" />
    <link href="css/style3.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
          integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
          crossorigin="anonymous">
<body>
<div class="checkmate">
    <nav class="navbar navbar-default checkmate">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand acLogo" href="/"></a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="/features"><b>FEATURES</b></a></li>
                    <li><a href="/compare"><b>COMPARE US</b></a></li>
                    <li><a href="/pricing"><b>FIZZBUZZ</b></a></li>
                    <li><a href="/company"><b>FOOBAR</b></a></li>
                    <li><a href="/docs"><b>DOCS</b></a></li>
                </ul><form action="/app/dashboard/search" method="POST">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/app/dashboard">
                                <input class="btn btn-success" type="button" value="Sign up" /></a></li>
                        <li><a href="/app/dashboard">
                                <input class="btn btn-link" type="button" value="Sign in" /></a></li>
                    </ul></form>
            </div>
        </div>
    </nav>
</div>
<div class="the_content">
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"
        integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="
        crossorigin="anonymous">
</script>
<script type="text/javascript">
    $('.orgSelector').dropdown();
    $('.orgSelector').tooltip();
</script>
</body>
</html>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Vinc
  • 306
  • 1
  • 7
  • There is no need for all that extra markup, CSS classes and media query, _boostrap_ has it already built-in, to just add to existing markup. – Asons Jan 04 '16 at 08:00
2

You have 2 options, no extra html markup or CSS needed:

  1. Add scroll event handler.

    With this you add/remove the class navbar-fixed-top. What does make this work is, when someone scroll the page the navbar position changes to position: fixed which make it stay at its position.

  2. Add navbar-fixed-top to the nav element's class.

    This way, and if no extra styling is needed during scroll, no need to catch the scroll at all.

Also, according to this post and bootstrap docs, you might need an extra padding on the body (or the element next after the navbar) to make up for the navbar's height when in position: fixed, or it could hide some of the page content. If this cause you issue, let me know and I assist you in how to fix it.

$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $("#navbar").addClass('navbar-fixed-top');
    } else {
      $("#navbar").removeClass('navbar-fixed-top');
    }

});

An update of your fiddle is here

If you want to add additional styling while it's at its position: fixed, just add this to your custom CSS

.navbar-fixed-top {
  background-color: lime;
}

Another update of your fiddle with added CSS rule

If you want to do something else at some other scroll position, you just update your event handler like this.

$(window).scroll(function(){
    var st = $(this).scrollTop();
    var el = $("#navbar");
    if (st > 0) {
      el.addClass('navbar-fixed-top');
      if (st > 50) {
        el.addClass('navbar-custom');
      } else {
        el.removeClass('navbar-custom');
      }
    } else {
      el.removeClass('navbar-fixed-top navbar-custom');
    }        
});

Yet another update of your fiddle with added a second CSS rule

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
1

I have check your code.

You have to do minor changes with nav .

Here is updated code : https://jsfiddle.net/oh69hq71/9/

jQuery("document").ready(function($){
    $('.orgSelector').dropdown();
   $('.orgSelector').tooltip();
  
    var nav = $('.nav-container');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});
.acLogo {
 background-image : url("http://placehold.it/120x50");
        background-size: 100%;
 height: 50px;
        width: 120px;
    padding-top: 15px;        
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall {
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help {
    margin-top: 10px;
}
.new-account {
    display: block;
    margin-top: 10px;
}
img.user-summary {
  max-width: 100%;
  height: auto;
}
div.user-summary {
  margin: 10px auto;
}
div.user-summary > img {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0 5px;
}
div.user-name {
  margin: 15px 0 0 0;
  font-style: italic;
  display: block;
}
div.user-status {
  font-weight: bold;
}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<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.5/js/bootstrap.min.js">
  </script>

<nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container-fluid">
           <div class="navbar-header">
             <a class="navbar-brand acLogo" href="/"></a>
           </div>
           <div>
             <ul class="nav navbar-nav">
                <li><a href="/features"><b>FEATURES</b></a></li>
               <li><a href="/compare"><b>COMPARE US</b></a></li>
               <li><a href="/pricing"><b>FIZZBUZZ</b></a></li>
               <li><a href="/company"><b>FOOBAR</b></a></li>
               <li><a href="/docs"><b>DOCS</b></a></li>
             </ul><form action="/app/dashboard/search" method="POST">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/app/dashboard">
<input class="btn btn-success" type="button" value="Sign up" /></a></li>
       <li><a href="/app/dashboard">
<input class="btn btn-link" type="button" value="Sign in" /></a></li>
                  </ul></form>
           </div>
         </div>
       </nav>
Bhavin Solanki
  • 4,740
  • 3
  • 26
  • 46
  • There is no need for that extra CSS class, _boostrap_ has it already built-in, and as you already added the `navbar-fixed-top` class to the `nav` element, your script doesn't do anything more than just add/remove the unnecessary extra class. – Asons Jan 04 '16 at 08:18