[JavaScript] Bestimmte Elemente sollen mitscrollen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von cable, 3. April 2012 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 3. April 2012
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Bestimmte Elemente sollen mitscrollen

    Hey,

    hab ein Problem mit ein paar Elemente auf einer Seite, die mitscrollen sollen (nur vertikal), falls sie nicht mehr im Browser zu sehen sind. Dann sollen sie am oberen Ende des Browserfensters andocken.

    Das ganze sieht so aus:
    Bild

    Hier sind es beispielsweise 4 Listen (<ul>) bei denen jeweils die Köpfe (z.B. <li>Das Erste</li>) dann mitscrollen sollen, wenn sie nicht mehr in Browser zu sehen sind.

    Da aber die Listen alle unterschiedlich lang sind, soll der Kopf nur jeweils so weit scrollen, bis das Ende der Liste erreicht ist. Grundsätzlich soll es eine ähnliche Funktionalität sein wie bei posistion: fixed, aber soll das Mitscrollen irgendwann beendet sein. Ich werde da sicher nicht allein mit HTML & CSS auskommen, deshalb schreibe ich das in den JS Bereich (jQuery im Einsatz).

    Ich hoffe, dass ich das Problem gut genug beschreiben konnte, damit mir hier jemand helfen kann.

    greez
     
  3. 3. April 2012
    AW: Bestimmte Elemente sollen mitscrollen

    du ermittelst mittels offsetTop den abstand der elemente zum dokumentanfang und wenn die seite gescrollt wird prüfst du mittels scrollTop ob die elemente sich ausserhalb des sichtfeldes befinden. ist das der fall, setzt du die elemente mittels position:fixed permanent in das sichtfeld.

    gibt aber auch n jquery-plugin: floatingtableheader - musst du dir halt ein wenig zurechtstützen.
     
  4. 3. April 2012
    AW: Bestimmte Elemente sollen mitscrollen

    Es existiert das Plugin StickyTableHeaders

    Das müsste wohl umgeschrieben werden, aber das Prinzip ist dasselbe.
     
  5. 3. April 2012
    AW: Bestimmte Elemente sollen mitscrollen

    ich hab das ganze mal eben nachgebaut, ist doch ein wenig komplexer als gedacht:

    http://murdoc.eu/rr/list-header.html
     
  6. 3. April 2012
    AW: Bestimmte Elemente sollen mitscrollen



    Public Domain? Wäre sehr nützlich.
     
  7. 3. April 2012
    AW: Bestimmte Elemente sollen mitscrollen

    Vielen Dank an beide. Hab es auch umgesetzt, mit einer Änderung. Wenn man am Boden angelangt, dann wird der header einfach ausgeblendet, falls man noch weiter scrollt, die Liste aber nicht mehr zu sehen ist. Damit kann man sich einiges ersparen.

    PHP:
    var  chan_head_pos  = $( 'ul.channel' ). offset (). top ;
            
            $(     window ). scroll (function() {
                if ($(     this ). scrollTop () >  chan_head_pos ) {
                    $(     'li.channel-head' ). each (function() {
                        
                        $(     this ). css ( 'position' ,  'fixed' );
                        $(     this ). css ( 'top' ,  0 );
                        
                        var      chan_end  = $( this ). parent (). offset (). top  + $( this ). parent (). outerHeight ();
                        if ($(     this ). offset (). top  > ( chan_end  - $( this ). outerHeight ())) {
                            $(     this ). hide ();
                        } else {
                            $(     this ). show ();
                        }
                        
                    });
                } else {
                    $(     'li.channel-head' ). each (function() {
                        $(     this ). css ( 'position' ,  '' );
                        $(     this ). css ( 'top' ,  '' );
                    });
                }
            });
    greez
     
  8. 3. April 2012
    AW: Bestimmte Elemente sollen mitscrollen

    ohne weitere anpassungen wird das script eh nicht auf anhieb überall funktionieren, von daher: ja, mach was du willst damit (ein verweis auf die seite wär aber nett :]).
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.