我如何讓我的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導航欄「崩潰」？

回答

相關問題