How would I make my Bootstrap navbar "collapse"?

Question

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

Answer 1

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');
    }
});

Answer 2

也许您应该检测窗口的滚动事件，之后，将导航栏的位置设置为固定，然后执行动画。这是javascript部分的一个示例，链接在操作中看到它：

$(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

我编辑了我的回复，即添加对“向上”方向的支持。关于为动画使用bootstrap，我不知道该怎么做，我认为它无法完成，因为bootstrap主要基于将CSS类应用于不同的元素。 CSS类是离散的，但是你要求为font-size属性设置数字动画。同样，你可以创建一个看似“交错”的动画。