Question

我编写了一个可以在DIV中滚动的网站。但我真的希望如果你向下滚动，标题和该div中的第一段保持其位置，但其下面的其余文本出现。

我的HTML中有以下内容：

<html>
<head>
<link rel="stylesheet" type="text/css" href="UnCo.css">
<title>21Webb | Under Construction</title>
</head>

<body>
    <div class="updateSoMe blok alBeMe" style="overflow:scroll; height:100px;">
    <h1>Updates & social media</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>

这在我的CSS中：

.updateSoMe {
display: inline-block;
float: right;
}

.updateSoMe h1 {
text-align: center;
}

.alBeMe {
width: 49%;
}

.alBeMe h1 {
background-color: #F6A22C;
margin: 0px;
border-radius: 8px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

编辑：代码新!! - ＆GT;如果您将HTML代码粘贴到文档中并将其放在文件夹中，请对CSS执行相同操作并将其放在同一文件夹中，然后在IE或GC或FF或您正在使用的任何内容中打开HTML：）

现在，我想要h1和第一个＆lt; p＆gt;当你在div中向下滚动时，标签会粘在顶部，第二个＆lt; p＆gt;标签要向下滚动。

这可能吗？如果可以的话，你可以帮我吗？

谢谢！布伦特

Answer 1

我不知道这是不是你真正想要的，因为你没有发送你自己的代码也许我错了，但你不能拥有标题和可滚动的{{1之外的第一段}}？

对于此jsfiddle中的例子，您可以向下滚动内容，但是您有一个固定在可滚动div上方的标题。这是你可以使用的东西吗？

编辑：看到你现在发布了你的代码。

Answer 2

<div class="scroll">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>


div.scroll {
background-color: #00FFFF;
width: 300px;
height: 200px;
overflow: scroll;
margin:10px;
}

滚动DIV？

2 个答案: