我如何使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);
});

滚动事件和位置固定

我还编辑了添加对“向上”方向的支持的回复。 关于将引导程序用于动画，我不知道该怎么做，我认为这是不可能的，因为引导程序主要基于将CSS类应用于不同的元素。 CSS类是离散的，但是您需要为数字动画，例如font-size属性。 同样，您可以创建看起来“交错”的动画。