Div soll beim scrollen am Bildschirmrand fixiert werden?

Hallo,

Ich habe ein Div, welches unter einem anderen Div liegt. Wenn ich nun scrolle, soll das Div, sobald es am oberen Browserrand ist, dort fixiert sein. Ich habe folgenden Code ausprobiert, aber leider funktioniert dieser nicht:

.fixed {position: fixed; top:0; }

Kann mir jemand helfen, was an dem Code falsch ist? Kenne mich leider nicht so sehr mit Javascript aus.

Vielen Dank im Voraus

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, programmieren, CSS

04.04.2017, 02:06

Das ist auch kein JavaScript sondern CSS.

Mit diesem Style positionierst du das Element fixed. Das bedeutet, es ist relativ zum Viewport ausgerichtet und ändert seine Position auf dem Bildschirm nicht mehr, auch wenn du scrollst.

Hier ein simples Beispiel:

<!doctype html>
<html>
 <head>
  <title>Fixed example</title>
 </head>
 <body style="height: 1500px">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <div style="position: fixed; background: red; top: 10px">Fixed</div>
 </body>
</html>

Achte bei deinem div-Element darauf, dass es auch den Klassenselektor zugewiesen bekommen hat, welcher definiert wurde.

<!-- Der style-Tag gehoert in den header-Bereich -->
<style type="text/css">
 .fixed {position: fixed; top: 0; }
</style>
<!-- ... dann irgendwo im body, dein Element -->
<div class="fixed">...</div>

Geldon

04.04.2017, 08:43

@regex Die klasse fixed von dir soll laut fragesteller aber erst zur wirkung kommen sobald man über das element hinaus scroll.

Ich werfe mal die stichworte sticky navigation und jquery in den Raum.
Keine Zeit, muss los.

Codepen und Google helfen gerne weiter.

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zur Frage

Eine Div immer im Vordergrund, wie?

Ich habe zwei Divs. Eine oben in fixed Position und eine darunter in absolute. Wenn ich nach unten Scrolle überdeckt die untere Div die obere. Wie bekomme ich die obere Div, die in fixed Postion steht immer ganz nach vorne?

[Bereich HTML/CSS]

...zur Frage

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Brauche Hilfe bei JavaScript möchte eine box (position: fixed) beim danneben klicken unsichtbar machen.?

Ich möchte mein Impressum und meine Kontakt seite bei klick öffnen und über allem andern anzeigen lassen. Dass hab ich auch hinbekommen nur ich bekomm es nicht hin es wieder zu schließen wenn ich daneben klicke.

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

div aktualisieren javascript

hallo wie kann ich mit javascript einen div aktualisieren in diesem code... <html>

<head>
</head>
<body>
<div id="aktualisieren">
<?php
$datum = date("j.n.Y");
$tag = date ("w");
$tage = array(Sonntag, Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag);
$fertig = $tage[$tag];
$stunde = date ("G"); 
$minuten = date("i");
$sekunden = date("s");
echo ("Es ist ".$fertig." der ".$datum." , ".$stunde." Uhr, ".$minuten." Minuten und ".$sekunden." Sekunden !");
?>
</div>
</body>
</html>

...zur Frage

Bei "scroll down" Menü animieren nur mit CSS möglich?

Ist es möglich rein in CSS ein oberes Menü zu animieren, wenn man nach unten scrollt?

Ich habe mit:

position: sticky;
top: 0;

zwar erreicht, dass das obere Menü erst etwas mit nach oben rutscht und dann am oberen Rand stehen bleibt.

Ich würde jedoch gern die Schriftgröße und die Lage in der Position

top: 0;

verändern und animieren. Gibt es da eine Möglichkeit nur in CSS?

...zur Frage

Automatisch Scrollen?

Hallo,

auf meiner Website hab ich 2 Icons, die durch eine Klick Funktion jeweils ein Div darunter erscheinen lassen.

Sobald ein Div erscheint oder ich die passende Klasse hinzufüge soll nun zu den passenden Div runter oder zum Seitenanfang gescrollt werden.

Wo liegt der Fehler ?...ich steh etwas aufm Schlauch.

Das Problem muss nicht unbedingt mit einer Scroll function gelöst werden =)

function klick() {
    let hauptDiv = document.getElementById('div_eins');


    if (hauptDiv.classList.contains('unsichtbar') == true) {
        hauptDiv.classList.remove('unsichtbar');
        hauptDiv.classList.add('sichtbar');
        window.scrollTo(0, 100);
    } else if (hauptDiv.classList.contains('sichtbar') == true) {
        hauptDiv.classList.remove('sichtbar');
        hauptDiv.classList.add('unsichtbar');
    }   else {
           return;
        }
    }

...zur Frage

Wie kann ich mit CSS die Position meines Menüs ändern?

Wie auf den Bildern zu sehen, habe ich zwei Probleme. Das Menü befindet sich am obersten Bildschirmrand - soll aber eigentlich am unteren Rand des schwarzweiß-banners positioniert werden. Des weiteren bekomme ich die weiße Box in der die Navigationspunkte sitzen nicht kleiner, sodass die Divider Striche auch noch zu hoch sitzen. Momentan ist das menü auch so eingestellt, dass es fest oben sitzt bis man runterscrollt und es am oberen bildschirmrand folgt. das kann auch gern so bleiben, mit ausnahme dass es eben erst ab der position am unteren bannerrand folgen soll. hoffe ist irgendwie klar was ich meine.

...zur Frage

HTML / CSS: div wird nicht angezeigt?

Ich fange gerade erst an und mein HTML-Code für div ist:

<body bgcolor="#333333">
  <div id="top"> </div>
</body>

und im CSS:

#top {
  background-color:aqua;
  width: 100%;
  height: 100px;
}

Aber wenn ich das im Browser angucken will, dann wird mir nichts angezeigt. Alles ist gespeichert und ich benutze Brackets. Davor hab ich es mit Atom ausprobiert, aber da funktioniert es auch nicht.

...zur Frage

DIV overflow: scroll; automatisch nach unten Scrollen?

Hallo,

ich habe ein Php Skript:

<?php
echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll;</div>";

echo "<div></div>";
?>

Den overflow: scroll; definiere ich in CSS.

Jetzt möchte ich, dass automatisch nach ganz unten gescrollt wird, wenn die Seite aufgerufen bzw. neu geladen wird.

Im Internet bin ich auf folgenden Code gestoßen:

<?php
echo '<body onLoad="letzteselement.scrollIntoView();">';

echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll; 
<a id="letzteselement" /> 
</div>";

echo "<div></div>";
?>

Bei Firefox funktioniert das auch einwandfrei, wenn ich allerdings einen anderen Browser benutze (z.B. Microsoft Edge) ist es, als ob der Code nicht existier -> es passiert nichts.

(Ich weiß nicht, ob es wichtig ist, aber der Inhalt meines Div wird aus einer Datenbank ausgelesen und ist relativ groß (Text))

Kent jemand noch einen anderen Code, der immer funktioniert?

...zur Frage

wozu braucht man div? (HTML)

Hallo,

beschäftige mich momentan bisschen mit html. Mir bereiten diese Positions und div container Probleme.

Also meine frage lautet wofür braucht man denn Div container?

man kann eine Webseite doch auch einfach ohne Div container aufbauen. also man setzt für jedes Element die Position absolute und gibt dann mit top und left die genaue Position ein, wo sich ein Element befinden soll.

Hoffe ihr versteht mich.

Danke im voraus

...zur Frage

Navigation (Website) fest oder nicht?

Findet ihr es besser, wenn die Navigation beim Scrollen am oberen Bildschirm fixiert bleibt? Oder wenn sie beim Scrollen verschwindet und man wieder hoch scrollen muss, um zur Navigation zu kommen?

Bei großen Webseiten ist es natürlich praktischer, wenn die Navigation fixiert ist, aber meine ist sehr klein und hat keine langen Seiten. Und eine fixierte Navigation nimmt dann Platz weg. Was würdet ihr machen? (Kann die Website noch nicht zeigen)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen