坚持股利屏幕

-3

的顶部。在我的网页我有一个div "header"上方，下方的div "titlebar" &它下面的其它标签。坚持股利屏幕

所以，当我滚动，我想header &其他部分向上或向下滚动&只是titlebar要在屏幕的顶部卡住。另外，当我向后滚动时，header应该位于开头处的顶部& titlebar之下。

什么是它的CSS代码？

#header{ 
 
    background-color: #909090; 
 
    padding: 10px; 
 
} 
 

 
h1{ 
 
    text-align: center; 
 
    color: #99ffcc; 
 
} 
 

 
#titlebar{ 
 
    background-color: #101010; 
 
    width: 100%; 
 
    position: sticky; 
 
    top: 0; 
 
} 
 

 
table{ 
 
    width: 100%; 
 
}

<div id="header"> 
 
    <h1>Random topic</h1> 
 
</div> 
 
<div id="titlebar"> 
 
    <table> 
 
    <th><a href="">Home</a></th> 
 
    <th><a href="">Gallery</th> 
 
    <th><a href="">Services</th> 
 
    <th><a href="">About</th> 
 
    <th><a href="">Contact</th> 
 
    </table> 
 
</div> 
 
<div id="container"> <p>random posts</p></div>

来源

2016-12-14 Ace

你可以把一个代码示例，可以帮助。 – Bhavana

[位置固定标题在html]可能重复（http://stackoverflow.com/questions/10975268/position-fixed-header-in-html） – XYZ

可能的重复http://stackoverflow.com/questions/1216114/我怎样才能制作一个div-stick-to-the-screen-once-its-rolled-to-the-rolled-to- 这个例子展示了如何滚动div直到它位于顶部，然后粘在那里 –

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
    } 
 
header{ 
 
    position:fixed; 
 
    width:100%; 
 
    height:100px; 
 
    background:green; 
 
    top:0px; 
 
    } 
 
main{width:100%; 
 
    height:3000px; 
 
    background:yellow; 
 
    margin-top:100px; 
 
    }

<html> 
 
<header> 
 
<h1>title here</h1> 
 
</header> 
 
<main> 
 
<p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> <p>other contents here..!!</p> <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p>other contents here..!!</p> 
 
    <p> movable contents here..!!</p> 
 
</main> 
 
</html>

来源

2016-12-14 09:48:34

您可以使用position: fixed在CSS

例子：

div.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
}

为了确保它的任何其他元素去了你的页面，您可以添加一个真正高z-index。

来源

2016-12-14 09:27:43

不要回答明显的重复真正低质量的答案。 – Roberrrt

坚持股利屏幕

回答

相关问题