有人可以帮我 CSS/jQuery 固定 header 与动态元素吗？

Question

我想要做的是有一个固定的 header，当您向下滚动并调整其中内容的大小时，它具有很好的 "shrinking effect" - 这很简单，我已经按照教程来帮助我做到那。

现在我要做的是当我向下滚动时让元素出现；例如：

当用户向下滚动时，菜单会隐藏左上角的元素（链接），然后显示一个徽标。搜索栏也出现在中间。我可以为这些做 CSS 并设置 'display:none'，但我希望向下滚动以显示它们，然后将其他元素设置为隐藏。

请记住，当我滚动回顶部时，我需要将原始元素设为 re-appear，然后隐藏搜索和徽标。

这是我用来让固定的 header 工作的代码（它很丑，但它以基本形式工作）：

header {
    text-align: center;
    font-size: 1.4em;
    line-height: 50px;
    height: 70px;
    background: #323232;
    color: #fff;
    font-family:'Open Sans', sans-serif;
    /* set animation */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
header.fixed {
    position: fixed;
    font-size: 14px;
    line-height: 48px;
    height: 40px;
    width: 100%;
    background: #323232;
    text-align: left;
    padding-left: 20px;
}
header.logo {
    width: 10px;
    height: 10px;
    background-color: #red;
    position: fixed;
    float: left;
}
.content {
    height: 2000px;
    width: 100%;
    background-color: #fff;
    padding: 25px;
}

<body>
    <!-- our markup -->
    <header>
        <h1>Header</h1>
    </header>
    <!-- an image for demonstration purposes -->
    <div class="content">Site Content</div>
    <!-- import jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- write script to toggle class on scroll -->
    <script>
        $(window).scroll(function() {
            if ($(this).scrollTop() > 1) {
                $('header').addClass("fixed");
            } else {
                $('header').removeClass("fixed");
            }
        });
    </script>
</body>

Answer 1

这是您要找的内容的快速版本。仍然需要样式正确 "links"。只是切换可见和不可见的问题：

(Demo)

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('header').addClass("fixed");
        $('.mLeft').fadeOut();
        $('.logo, .search').fadeIn();
    } else {
        $('header').removeClass("fixed");
        $('.mLeft').fadeIn();
        $('.logo, .search').hide();
    }
});

header {
    text-align: center;
    font-size: 1.4em;
    line-height: 50px;
    height: 70px;
    background: #323232;
    color: #fff;
    font-family:'Open Sans', sans-serif;
    /* set animation */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
header.fixed {
    position: fixed;
    font-size: 14px;
    line-height: 48px;
    height: 40px;
    width: 100%;
    background: #323232;
    text-align: left;
}
.search {
    display: none;
    position: fixed;
    left: 190px;
    top: 0;
}
DIV.logo {
    display: none;
    padding: 5px;
    background-color: red;
    position: fixed;
    float: left;
    left: 20px;
    top: 0;
}
.mLeft {
    float: left;
}
.mRight {
    float: right;
}
.content {
    height: 2000px;
    width: 100%;
    background-color: #fff;
    padding: 25px;
}

有人可以帮我 CSS/jQuery 固定 header 与动态元素吗？

Can someone help me with a CSS/jQuery fixed header with dynamic elements?

javascript

jquery

html

css

fixed