Ergebnis 1 bis 4 von 4

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

  1. #1
    Teeny
    Registriert seit
    18.02.2009
    Beiträge
    24
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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-Code:
    <!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>
    brauchste halt jquery für und ich denke mal du wirst des beispiel adaptieren können!
    ps, habs in den richtigen bereich verschoben!
    Geändert von synaptic (17.03.2010 um 14:10 Uhr) Grund: problemlösung ergänzt
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    18.02.2009
    Beiträge
    24
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    öö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..
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. In ICQ ist bei "unsichtbar" die Blume weiß, bei "sichtbar" rot
    Von makemyday77 im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 01.06.2010, 03:10
  2. Dürrenmatts "Der Besuch der alten Dame" und Sophokles' "Ödipus Tyrannos"
    Von Unregistriert im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 21.01.2010, 22:22
  3. Border-Bottom: noch "zarter" als "1px dashed"?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.09.2008, 18:10
  4. php: "bitte warten" oder "login läuft"
    Von phore im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 05.04.2006, 18:18
  5. Text immer "unten" und "rechts" am Frame
    Von Valdyn im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.05.2004, 19:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •