Wie erstelle ich ein Element "fixed" aber trotzdem mit "position: relative"?

nilss

Liebes HTML-Forum,

ich würde gern etwas machen, was ich schon mehrfach auf Webseiten gesehen habe:

Ein Element soll BIS ZU einem gewissen Punkt relativ positioniert sein, AB einem gewissen Punkt (beim Runterscrollen) allerdings den Benutzer 'verfolgen'.

Bisher habe ich folgendes probiert:
<div style="position: fixed; top: 12em; right: 1em; position: absolute;" >

... das bringt aber nicht den gewünschten Effekt, weil bei 12em im oberen Teil der Webseite noch etwas anderes auf der rechten Seite stattfinden soll. ... Das Element soll also ZUNÄCHST tiefer positioniert sein (im normalen Fluss der Seite) und erst, wenn man herunter-scrollt, soll es 'hängenbleiben'. ... Beispielsweise in der vertikalen Mitte der Seite.

=> Wie macht man das?

Beste Grüße
Nils

synaptic

haste ma nen beispiel dazu? mir würd spontan nur javascript einfallen, wüsste nicht, dass css sowas kann

poste ma, ich geh pennen und seh mir des morgen dann mal an, klingt interessant

edit:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<style type="text/css">
    #wrapper{
        width:980px;
        margin:0 auto;
        padding:20px;
        border: 1px solid purple;
        overflow:hidden;
    }
    #left{
        float:left;
        border:1px solid black;
        width:200px;
        overflow:none;
    }
    #right{
        float:left;
        margin-left:25px;
        border:1px solid black;
        width:745px;
    }
    #scrolldiv{
        position: absolute; 
        border: 1px dashed darkgreen;
        right: 1em;
        top: 12em;
    }
    p{
        padding:5px;
    }
    #ausgabe{
        position:fixed;
    }
</style>
<!-- include jquery scripts -->
<script type="text/javascript" src="javascript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
    var ausgabe;
    $(document).ready(function(){
        ausgabe = $("#ausgabe");
        ausgabe.html("0");

        $(document).scroll(function(){
            ausgabe.html(window.pageYOffset);
            if(window.pageYOffset >= 188){
                $("#scrolldiv").attr("style", "position:fixed; top:0;");
            }else{
                $("#scrolldiv").attr("style", "position:absolute; top:12em;");
            }
        });
    });
</script>
</head>
<body>
<span id="ausgabe">&nbsp;</span>
<div id="wrapper">
    <div id="left">
        <p>
            lorem ipsum dolor sit amet numquam blablubbske...
            lorem ipsum dolor sit amet numquam blablubbske...
            lorem ipsum dolor sit amet numquam blablubbske...
            lorem ipsum dolor sit amet numquam blablubbske...
            lorem ipsum dolor sit amet numquam blablubbske...

        </p>
        <div id="scrolldiv">
            bla<br />
            bla<br />
            bla<br />
            bla<br />
            bla<br />
            bla<br />
        </div><!-- ende scrolldiv-->
    </div><!-- ende left-->
    <div id="right">
        <p>
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
                -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
                -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />
            -<br />

        </p>
    </div><!-- ende right-->
</div><!-- ende wrapper-->

</body>
</html>

Alles anzeigen

brauchste halt jquery für und ich denke mal du wirst des beispiel adaptieren können!
ps, habs in den richtigen bereich verschoben!

nilss

Hallo synaptic,

vielen Dank für die ausführliche Hilfe! Ich habe gestern Nacht noch nach einem Beispiel gesucht, allerdings keins gefunden. ... Wie das so ist ... wenn man's nicht erwartet, dann sieht man es mal irgendwo, aber wenn man danach sucht ...

... Ein Skript zu integrieren habe ich noch nie gemacht. Das Ganze gestaltet sich für mich auch etwas schwierig, da ich eine Webseite auf Basis von Joomla! betreibe und ich leider nicht den vollständigen Durchblick durch die Funktionalität der Datenbank habe. ... Ich wüsste also nicht, wie und wo ich dort Javascript integrieren müsste und möchte mich damit jetzt auch nicht beschäftigen. –*... Da lasse ich den Banner lieber "nicht scrollend".

... Ich werde gleich noch mal einen Beitrag zum Thema "Joomla => HTML-Webseite" starten, das würde hier sonst "off topic" gehen.

Dir auf jeden Fall vielen Dank für's Heraussuchen! Möglicherweise komme ich auf diesen Thread noch mal in einiger Zeit zurück und beschäftige mich intensiver mit dem Tipp von dir. ... Für den Moment wäre es mir zu viel Mühe, mich da reinzufummeln.

Beste Grüße
Nils

synaptic

ööhm da is nix "herausgesucht" ich hab das ganze in 15 inuten gecodet...

und wenn du so probleme mit joomla hast, kann ich gerne versuchen dir da zu helfen, schreib mir einfach ne pn..

Tags