我如何让我的Bootstrap导航栏“崩溃”？

我试图复制从这里滚动效果：http://www.altisliferpg.com/我如何让我的Bootstrap导航栏“崩溃”？

我有，他们使用的引导导航栏，我从这里拍摄的大量修改版的感觉：http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module，并改变它适合我的具体案例。

我该如何做，所以当您向下滚动页面时，顶部的栏会变得“更小”，并随着页面的滚动而滚动？谢谢

来源

2016-04-15 Nitro

我只会发布一些我认为可以帮助的链接：http://callmenick.com/post/animated-resizing-header-on-scroll http://stackoverflow.com/questions/24765155/shrinking- navigation-bar-when-scrolling-down-bootstrap3 –

@HaroenViaene谢谢，我会看看它。为了编辑JS，CSS和这里提到的东西：http://stackoverflow.com/questions/24765155/shrinking-navigation-bar-when-scrolling-down-bootstrap3我只是修改bootstrap-min和其他文件？你有什么想法，这家伙是用什么酒吧？ http://www.guildcraft.org/ – Nitro

你可以使用CSS转换的高度，字体大小和任何你想改变。然后简单地设置一个滚动监听器，它向头添加一个类，以便改变大小。快速（而且非常难看）的例子。 jsFiddle

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

来源

2016-04-15 15:14:22

你说“容易”，但我会把它放在哪里？ bootstrap.min.css？ – Nitro

我真的不知道你的问题是什么..将javascript部分放在

也许你应该检测窗口的滚动事件，在这之后，设置导航栏的位置固定，然后，执行动画。这里的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

我编辑我添加了“向上”的方向也支持响应。关于为动画使用引导程序，我不知道该怎么做，我认为它不能完成，因为引导程序主要基于将CSS类应用于不同的元素。 CSS类是离散的，但是您要求为数字创建动画，如font-size属性。尽可能多的，你可以创建一个看起来“交错”的动画。

来源

2016-04-15 15:32:29 amedina

bootstrap.min.css？你能不能把它缩小到比例子中更大的尺寸？当你回去时，你会如何让它变得更大？ – Nitro

我如何让我的Bootstrap导航栏“崩溃”？

回答

相关问题