Question

我确信我之前已经看过这种技术，但我似乎无法弄清楚它的名称，或者找到一个体面的例子来从网上学习。似乎是一个基本问题：

我想创建一个单页网站，当网页加载时网站的徽标显示为大，然后随着用户向下滚动而变小，直到图像达到一定大小，然后将其固定到顶部页面，其下方的网站菜单，也固定在页面顶部。

我尝试了一些方法来完成这项工作。我现在设置它的方式，它下面的内容太快“滚动”在标题下方并隐藏在下面。

标记

</div>
<nav id="nav">
    <ul>
        <li><a href="#section_1">Section 1</a>
        </li>
        <li><a href="#section_2">section_2</a>
        </li>
        <li><a href="#section_3">section_3</a>
        </li>
        <li><a href="#section_3">section_3</a>
        </li>
    </ul>
</nav>
</header>
<div id="main">
    <div class="content_section" id="section_1">Section 1!</div>
    <div class="content_section" id="section_2">Section 2</div>
    <div class="content_section" id="section_3">Section 2</div>
    <div class="content_section" id="section_3">Section 3</div>
</div>

CSS

#header {
    width:100%;
    text-align: center;
    position:fixed;
}
#header img {
    height:100%;
}
#logo_container {
    height:200px;
    /*temporary -- this is usally supplied by height of the image inside it */
}
nav {
    background-color: #E9E9E9;
    display: inline-block;
    margin: 30px 0;
    text-align: center;
    width: 100%;
}
nav ul, nav li {
    margin: 0;
    list-style:none;
    list-style-image: none;
}
#main {
    display:inline-block;
    padding-top:800px;

}
.content_section {
    display:block;
    border-top:5px black solid;
    height:200px;
    margin-bottom:20px;
}

和Javascript：

$(function () {
    function resizeTopLogo() {
        var winScrollTop = $(window).scrollTop() + 0,
            zeroSizeHeight = $(document).height() - $(window).height(),
            newSize = Baseheight * (1 - (winScrollTop / zeroSizeHeight) * (2 / 3));
        Node.css({
            height: newSize
        });
        $("#main").css({
            paddingTop: $("#header").height()
        })
    }

    var
    Node = $('#logo_container'),
        Baseheight = Node.height();
    $(window).scroll(function () {
        resizeTopLogo();
    });
});

所以，我的问题是如何使底部内容滚动使用缩小大小的标题，UNTIL标题达到它应该保留的高度，然后独立于标题滚动。（当然，当用户向上滚动到页面顶部时，它必须返回到其原始状态，但这可能是另一个故事）。

要说清楚，我只想问一下将div修复到页面顶部。我能做到。我希望减少图像的大小，同时固定到页面顶部，同时内容在其下方滚动很好。

我也尝试将内容放在标题下面，在同一个固定的div中，但内容不会滚动。我尝试使用虚拟容器使其滚动，但是内容的底部不会一直显示，而且看起来不必要的hacky。

如何在滚动期间缩放div高度并将其固定在顶部

0 个答案: