Стикер div в верхней части экрана

-3

На моей веб-странице у меня есть div "header" наверху, под ним находятся div "titlebar" & под другими тегами.Стикер div в верхней части экрана

Так что, когда я перечисляю, я хочу 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

Возможный дубликат [position fixed header in html] (http://stackoverflow.com/questions/10975268/position-fixed-header-in-html) – XYZ

Возможный дубликат http://stackoverflow.com/questions/1216114/ В этом примере показано, как прокручивать 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

Стикер div в верхней части экрана

ответ

Смежные вопросы