Navbar在頁面頂部改變大小

在這個引導主題中，當你向下滾動並在我的JsFiddle中時，導航欄更改大小我嘗試重新創建，但出於多次嘗試失敗和放棄。我在一旁看着的堆棧溢出問題和其他的網頁很多，也許我的關鍵字是錯誤或東西，但我沒有找到我要找的linkss低於Navbar在頁面頂部改變大小

Clean Canavs THEME

Jsfiddle Here

，因爲這個網站想要一些代碼生病後，但如果你們會發布的jsfiddle鏈接，我會perfer ..

CSS

body { 
padding: 0; 
/* Gets rid of the automatic padding */ 
margin: 0; 
/* on HTML documents */ 
font-family: Lucida Grande, Helvetica, Arial, sans-serif; 
font-size: 12px; 
} 
#navigation { 
position: fixed; 
top: 0; 
width: 100%; 
color: #ffffff; 
height: 35px; 
text-align: center; 
padding-top: 15px; 
/* Adds shadow to the bottom of the bar */ 
-webkit-box-shadow: 0px 0px 8px 0px #000000; 
-moz-box-shadow: 0px 0px 8px 0px #000000; 
box-shadow: 0px 0px 8px 0px #000000; 
/* Adds the transparent background */ 
background-color: rgba(1, 1, 1, 0.8); 
color: rgba(1, 1, 1, 0.8); 
} 
#navigation a { 
font-size: 14px; 
padding-left: 15px; 
padding-right: 15px; 
color: white; 
text-decoration: none; 
} 
#navigation a:hover { 
color: grey; 
} 
/* This just adds some style to the placeholder text */ 
#content { 
width: 600px; 
padding-top: 70px; 
padding-bottom: 30px; 
margin-left: auto; 
margin-right: auto; 
{

HTML

<div id="navigation"> 
    <a href="#">Home</a> 
<a href="#">Portfolio</a> 
<a href="#">Our Apps</a> 
<a href="#">Support</a> 
<a href="#">Press</a> 
<a href="#">About</a> 
</div>

來源

2013-12-08 user3079663

如果您查看該主題的源代碼，你會看到他們是怎麼做到的

他們增加和通過jQuery

刪除類

$(function() { 
    $(window).scroll(function() { 
     if ($("#navigation").offset().top>35) { 
      $("#navigation").addClass("sticky"); 
     } 
     else { 
      $("#navigation").removeClass("sticky"); 
     } 
    }); 
});

我添加了粘性類，它將被添加到您的導航當您滾動pas TA某一點

.sticky { 
    background: rgba(0, 0, 0, 0.8); 
    padding-top: 8px!important; 
    height: 30px!important; 
}

更新小提琴：http://jsfiddle.net/8d8c3/2/

請記住在你的網站

來源

2013-12-08 11:40:39 toast

這裏有另一種方法：http://stackoverflow.com/questions/6713324/how-to-shrink-navigation-menu-when-scrolling-down – toast

非常感謝這是我在找什麼:) – user3079663

只能用javascript做到這一點。 Sticky Header after scrolling down

參見例子的jsfiddle： http://jsfiddle.net/XyVAG/9/

$(window).on("scroll", function() { 
    var fromTop = $("html,body").scrollTop(); 
    $(window).toggleClass("down", (fromTop > 200)); 
});

來源

2013-12-08 11:27:38 nick4fake

我喜歡是一種什麼感覺，但並不完全符合我一直在尋找前添加下面的腳本。當我得到15代表我會確保+1你 – user3079663

這裏引用jQuery的一個FIDDLE

首先包括jQuery庫在您的<head>部分

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

然後就在</body>標籤

<script> 
$(function(){ 
    $(window).scroll(function(){ 
    if($('#navigation').offset().top === 0) { 
     $('#navigation').stop().animate({ height: '50px' }, 300); 
    } 
    else { 
     $('#navigation').stop().animate({ height: '35px' }, 300); 
    } 
    }); 
}); 
</script>

來源

2013-12-08 11:46:34 mdesdev

Navbar在頁面頂部改變大小

回答

相關問題