it-swarm.com.de

Bildlauffähigen Inhalt hinter transparenten Fixpositionen beim Scrollen der Seite ausblenden?

Ich habe einen div namens header, der mit einer festen Position eingerichtet ist. Das Problem ist, wenn ich die Seite scrolle, erscheint der Inhalt der Seite hinter der Kopfzeile (die Kopfzeile ist transparent).

Ich weiß viel über Css, aber ich kann es nicht verstehen. Ich habe versucht, den Überlauf auf ausgeblendet zu setzen, aber ich wusste, dass es nicht funktionieren würde (und es nicht tat).

Das ist sehr schwer zu erklären, also habe ich mein Bestes gegeben.

html:

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

css:

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

Hier ist ein Screenshot des Problems:

enter image description here

16
mtlca401

Komme erst spät zu diesem Thema, aber falls jemand anderes in der Zukunft darüber stolpert, hier ist dein Fix.

Ihr CSS-Code:

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

Ihr HTML:

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

Dadurch erhalten Sie eine Kopfzeile, die sauber zu Ihrer Site passt und oben angezeigt wird. Der Hauptinhalt wird frei von der Kopfzeile gescrollt und verschwindet, wenn er die Kopfzeile passiert. Ihr .bottom-wrapper-Auffülloberteil sollte der Höhe des Inhalts des Header-Wrappers entsprechen.

Prost!

15
Martin

Sie suchen wahrscheinlich nach z-index. Hiermit können Sie die vertikale Reihenfolge der Elemente auf der Seite festlegen. Ein Element mit z-index: 10 schwebt (visuell) über einem Element mit z-index: 5.

Geben Sie den Inhalt z-index: 5 an und prüfen Sie, ob er funktioniert.

7
Blender

Ich hatte ein ähnliches Problem und fand eine Lösung für meinen Fall. Es sollte gelten, ob Sie ein Vollbild-Hintergrundbild oder eine Volltonfarbe (einschließlich Weiß) verwenden.

HTML

<div id="full-size-background"></div>
 <div id="header">
  <p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
  <p>Some text that should be scrollable</p>
</div>

CSS

#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

Dies gibt mir das Aussehen eines vollständigen Seitenbildes mit einer transparenten festen Kopfzeile, und wenn der Hauptinhalt durchgeblättert wird, versteckt er sich hinter der Kopfzeile. Die Bilder erscheinen nahtlos.

Sie könnten dasselbe mit einem einfarbigen Hintergrund machen, aber es wäre wahrscheinlich einfacher gewesen.

2 Anmerkungen: Der Header hat eine festgelegte Höhe, die ich nur in FF und Chrome getestet habe.

5
Scott Sawyer

Hat #header eine festgelegte Höhe?

#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }

Ziemlich sicher, dass dies nicht in IE funktionieren würde ...

1
asymptote

Fixiere die Position des content div unter dem Header + overflow -y des content div.

0
takrishna

Ich denke, dass es zu spät ist zu antworten. Aber später hat jemand einen Blick darauf, das wird hilfreich sein.

Fügen Sie einfach Hintergrund zur Kopfklasse hinzu

Hier ist der Code ->

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:999;
    background-color:#FFFFFF;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
   
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
    z-index:1;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}
<!DOCTYPE html>
<html>


<body>

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>
</body>
</html>

Auch ich hatte ein ähnliches Problem, aber ich habe es mit einem einfachen schmutzigen Hack gelöst

1) habe ein weißes Bild im Bilderordner

2) dann fügen Sie diese CSS im Header-Stil

z-Index: 999; // um eine Überschrift über den Bildlaufinhalt zu setzen

hintergrundbild: url ("../ images/white.png"); // um den scrollenden Inhalt auszublenden

3) Es ist vollbracht !!

0
naveen