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在页面顶部改变大小

回答

相关问题