如何使网页的一部分不与页面的其余部分滚动

How to make part of the webpage not scroll with the rest of the page?

本文关键字：余部 滚动 何使 网页 一部分      更新时间：2024-05-17

我对网页设计很陌生，我将制作一个简单的网页。我喜欢这个网页的想法：

http://dropplets.com/

顶部不与页面的其他部分滚动，从而产生整洁的滚动效果，以及可滚动部分的顶部刚好位于网页底部的地方（就像鼠标滚轮的一次"点击"，你会立即开始看到滚动部分）。这样的事情是怎么发生的？

只给出位置：固定；z索引：1到你想在滚动和包装中返回的顶部给出位置：相对；z索引：2；

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.fix-div{position:fixed; height:100%; width:100%; left:0; top:0; z-index:1;}
#wrapper{position:relative; z-index:2; margin:100% 0 0;}
</style>
</head>
<body>
    <div class="fix-div">
        Fix div content goes here...
    </div>
    <div id="wrapper">
        Your content goes here...
    </div>
</body>
</html>

Fiddle:链接

代码：

CSS：

.main{
    background-color:green;
    width:100%;
    height:100px;
    padding:0px;
    margin:0px;
    z-index:1;
    position:fixed;
    top:0px;
}
.content{
    height:1000px;
    width:100%;
    margin-top:100px;
    z-index:10;
    background-color:red;
    position:relative;
}

HTML:

<div class='main'></div>
<div class='content'></div>

对于不想滚动的部分，将css设置为position:absolute；顶部：0；左：0；

相关文章：