CODEWITHSUNDEEP
javascriptcss
DaveTheMinion
DaveTheMinion

Reputation: 664

Make Navigation Bar that Shrinks when Scrolling Begins

I am designing a website that I would like to have a navigation bar that sticks to the top of the page, but gets smaller whenever the user scrolls down. A good example of this is https://www.endgame.com/. If possible, I would like to do this solely with CSS, but if necessary, would be willing to do JavaScript. After some research and looking at Endgame's source code, I am unable to figure out how to do this.

How could this be achieved?

Upvotes: 1

Views: 4365

Answers (2)

Downgoat
Downgoat

Reputation: 14371

Use CSS transitions and just a little jQuery (4 lines):

$(document).scroll(function() {
  if ($(this).scrollTop() > 10) { //Adjust 150
    $('#head').addClass('shrinked');
  } else {
    $('#head').removeClass('shrinked');
  }
});
body {
  height: 9999px;
  margin: 0;
  background: url(http://webdesignledger.com/wp-content/uploads/2009/09/pattern_places_8.jpg) repeat;/* Added for sense of scrok=lling */
}
#head {
  background-color: red;
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0;
}

#head, #head * { transition: all 0.3s ease; }

#head.shrinked {
  height: 30px;
}

#head.shrinked span {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="head">
  <span>My Header</span>
</div>

CSS transitions will animate a change. When we add the class that changes the height, it will animate that. Which is basically how this works. This uses CSS so if you wish to add new styles, you just need to detect #head.shrinked then you can add a selector. I did that with the span to change the color. You can use it to show a different logo when the navigation shrinks.

The website you linked actually uses this method (I've trimmed out the extra stuff).

$(window).on('scroll', function(){ 
  var $this = $(this);
  if($this.scrollTop() > 1){
    $header.addClass('shrt');
  }else{
    $header.removeClass('shrt');
  }

});

It also adds a shrt class

<header class="cf" role="banner" style="top: 0px;">

becomes:

<header class="cf shrt" role="banner" style="top: 0px;">

The CSS also uses transitions

transition-delay: 0s, 0s;
transition-duration: 1s, 1s;
transition-property: top, height;
transition-timing-function: ease, ease;

Properties changed are:

max-width: 20px !important;
border-top: 5px solid #040407;
font-size: 80%;
height: 24px;
width: 24px;
top: 14px;

Upvotes: 2

Dylan Valade
Dylan Valade

Reputation: 5605

Headroom.js is cool but works a little differently from endgame's fixed nav. Headroom hides the nav when scrolling down and displays it again when scrolling back up. http://wicky.nillia.ms/headroom.js/

If you want to try it, here is some code that initializes headroom and toggles a hidden class for a large and small version of the logo using the custom scroll events.

// Show and hide menu on scroll
$('#primary-nav-container').headroom({
    // Pixels from top
    'offset': 200,
    // Scrolling tolerance
    'tolerance': 5,
    'classes': {
        /*'initial': 'animated',*/
        'pinned': 'slideDown',
        'unpinned': 'slideUp'
    },
    // Callback when nav pinned
    onPin : function() {

        $('#primary-nav-container').fadeIn();
    },
    // Callback when nav unpinned
    onUnpin : function() {

        $('#primary-nav-container').fadeOut();
    },
    // Callback when above offset
    onTop : function() {

        // Show large logo
        $('.large').removeClass('hidden');
        $('.small').addClass('hidden');
    },
    // Callback when below offset
    onNotTop : function() {

        // Show small logo
        $('.large').addClass('hidden');
        $('.small').removeClass('hidden');
    }
});

Upvotes: 1

Related Questions