如何让我的 Bootstrap 导航栏“折叠”？

Question

我正在尝试从这里复制滚动效果：http://www.altisliferpg.com/

我感觉他们正在使用经过大量修改的 Bootstrap Navbar 版本，我从这里获取：http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module 并对其进行了更改以适应我的具体情况。

我将如何做到这一点，当您向下滚动页面时，顶部的栏会“变小”并在您滚动时与页面一起滚动？谢谢

Answer 1

您可以对高度、字体大小和任何其他您想要更改的内容使用 css 过渡。然后只需设置一个滚动侦听器，它将一个类添加到标题中，因此大小会发生变化。快速（而且非常丑陋）的例子。 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 属性一样。同样，您可以创建一个看起来“交错”的动画。