CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapnavbar
Nitro
Nitro

Reputation: 55

How would I make my Bootstrap navbar "collapse"?

I am trying to replicate the scrolling effect from here: http://www.altisliferpg.com/

I have a feeling that they are using a heavily modified version of Bootstrap Navbar, which I have taken from here: http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module and have changed it to fit into my specific case.

How would I make it so when you scroll down the page, the bar on the top gets "smaller" and scrolls along with the page as you scroll? Thanks

Upvotes: 0

Views: 83

Answers (2)

amedina
amedina

Reputation: 3416

Maybe you should detect the scroll event of the window, after that, set the position of the navbar to fixed and then, perform the animation. Here's an example of the javascript part and a link see it in action:

$(function(){

    var performingDownAnimation = false,
        performingUpAnimation = false;

    var performScroll = function(){
    if($("body").scrollTop() > 0) {

            if(performingUpAnimation) {
            $('#logo').stop();
          performingUpAnimation = false;
        }

        if(!performingDownAnimation){
          $('#navbar').addClass('navbar-fixed');
          $('#logo').animate({ 'font-size': "12px" }, 1000, function(){
            performingDownAnimation = false;
          });
          performingDownAnimation = true;
        }        

      }else if($("body").scrollTop() == 0){

        if(performingDownAnimation) {
            $('#logo').stop();
          performingDownAnimation = false;
        }

        if(!performingUpAnimation){
          $('#navbar').removeClass('navbar-fixed');
          $('#logo').animate({ 'font-size': "48px" }, 1000, function(){
            performingUpAnimation = false;
          });
          performingUpAnimation = true;
        }

      }
  }

    $(document).on('scroll', performScroll);
});

On scroll event and position fixed

I edited my response for adding support for the "up" direction too. About using bootstrap for the animation, I have no idea how to do it, and I think it can't be done, because bootstrap is based mainly on applying CSS classes to different elements. CSS classes are discrete, but you are asking for animating something numerical, as the font-size property is. As much, you could create an animation that looks "staggered".

Upvotes: 0

Michael Kunst
Michael Kunst

Reputation: 2988

You can use css transitions for the height, font size and whatever else you want changed. Then simply set a scroll listener, which adds a class to the header so the size changes. Quick (and very ugly) example. jsFiddle

$(window).scroll(function () {
    if ($(this).scrollTop()) {
        $('#header').addClass('small');
    }
    else {
        $('#header').removeClass('small');
    }
});

Upvotes: 1

Related Questions