CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user3301160
user3301160

Reputation: 77

Shrink navbar while scrolling down using Bootstrap 3

I am using Bootstrap 3 for developing a website. I need to create a navbar which should shrink as the user scrolls down.

Something like - http://osticket.com

How can I create this? I am using Bootstrap's fixed-top example as a starting point - http://getbootstrap.com/examples/navbar-fixed-top/

I need to put a logo onto the left instead of the text and it should reduce its size as the user scrolls down.

Upvotes: 2

Views: 10770

Answers (3)

Muhammad Asim
Muhammad Asim

Reputation: 72

You have to add java-script for this function. CSS classes have to be updated accordingly to get the shrink on scroll affect. Complete example is shown on this link. http://www.bootply.com/109943#

Upvotes: 2

Yabs
Yabs

Reputation: 51

Good example of shrinking when scrolling has been documented here: http://www.bootply.com/109943

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

Upvotes: 5

DjDCH
DjDCH

Reputation: 311

You can simply do it the same way they did it. If you look at the page source, they are simply adding a class to the body element when the page is scrolled. This class is overwriting the display format of the header.

To detect if the page has been scrolled down, they are using a javascript function with events listeners. You can look at the function source code here:

http://osticket.com/sites/all/themes/Porto/js/sticky.js

Upvotes: 3

Related Questions