1

我确信我以前见过这种技术，但我似乎无法弄清楚它叫什么，或者在网上找到一个像样的例子来学习。似乎是一个基本问题：

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

我已经尝试了几种方法来完成这项工作。我目前设置它的方式，它下面的内容在标题下方滚动太“快速”并隐藏在下面。

这是一个 JSFiddle

标记 

</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();
    });
});

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

为了清楚起见，我只是在询问将 div 固定到页面顶部的问题。我能做到。我想减小图像的大小，同时固定到页面顶部，同时在其下方很好地滚动内容。

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

4

0 回答 0