Question

在这个引导程序主题中，当你在我的JsFiddle中向下和向上滚动时，导航栏会改变大小我尝试重新创建但是在多次尝试中我失败并放弃了。我看了很多堆栈溢出问题和其他网页也许我的关键字是错的或者什么，但我没有找到我正在寻找的链接在下面

因为这个网站想要一些代码生病，但如果你们发布jsfiddle链接，我会更愿意。

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>

Answer 1

您只能使用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));
});

Answer 2

如果你查看该主题的来源，你会看到他们是如何做到的

他们通过jquery

添加和删除一个类

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

我添加了粘贴类，当您滚动到某个点时，它将添加到您的导航

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

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

请记住在您的网站中引用jquery

Answer 3

这是 FIDDLE

首先在<head>部分

中包含jQuery库

<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>

导航栏在网页顶部更改大小

3 个答案: