我将如何使我的引导导航栏“;崩溃”;

How would I make my Bootstrap navbar "collapse"?

本文关键字：崩溃 导航 何使 我的      更新时间：2023-09-26

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

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

当你向下滚动页面时，顶部的栏会变得"更小"，并随着页面一起滚动，我该怎么做？感谢

您可以使用css转换来更改高度、字体大小和其他任何需要更改的内容。然后简单地设置一个滚动侦听器，它会在标头中添加一个类，以便大小发生变化。快速（非常丑陋）的例子。jsFiddle

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

也许你应该检测到窗口的滚动事件，然后将导航条的位置设置为固定，然后执行动画。下面是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);
});

滚动事件和位置固定

我编辑了我的回复，添加了对"向上"方向的支持。关于使用bootstrap制作动画，我不知道如何做到，我认为这是不可能的，因为bootstrap主要基于将CSS类应用于不同的元素。CSS类是离散的，但你要求动画化一些数字的东西，就像字体大小属性一样。同样，你可以创建一个看起来"交错"的动画。

相关文章：