DIV an den oberen Bildschirmrand kleben

-3

In meiner Webseite habe ich eine div "header" an der Spitze, darunter die div "titlebar" & darunter andere Tags. SoDIV an den oberen Bildschirmrand kleben

wenn ich blättern, möchte ich die header & andere Teile, um nach oben oder unten & nur die titlebar am oberen Bildschirm geklebt werden. Auch wenn ich zurück scrolle, sollte die header oben & die titlebar darunter wie am Anfang sein.

Was ist der CSS-Code dafür?

#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>

Quelle

2016-12-14 Ace

könnten Sie ein Code-Beispiel setzen, die helfen könnten. – Bhavana

Mögliches Duplikat von [Position fixed header in html] (http://stackoverflow.com/questions/10975268/position-fixed-header-in-html) – XYZ

Mögliches Duplikat von http://stackoverflow.com/questions/1216114/ How-can-i-make-a-div-Stick-an-der-Spitze-des-Bildschirms-einmal-ist-schon-gescrollt-zu Dieses Beispiel zeigt, wie man ein div scrollt, bis es oben ist, und dann kleben Sie es dort –

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>

Quelle

2016-12-14 09:48:34

können Sie position: fixed in CSS verwenden

Beispiel:

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

sicherzustellen, dass es in Ihre Seite ein beliebiges anderes Element gehen werden Sie ein wirklich hinzufügen hoch z-index.

Quelle

2016-12-14 09:27:43

Beantworten Sie nicht offensichtliche Duplikate mit wirklich schlechte Antworten. – Roberrrt

DIV an den oberen Bildschirmrand kleben

Antwort

Verwandte Themen