Position eines Containers relativ zum sichtbaren Bereich ermitteln

[majo]

Hi,

ich hoffe ich habe den Titel halbwegs korrekt gewählt, es fällt mir etwas schwer zu beschreiben was ich versuche umzusetzen...

Ich habe eine Navigationsleiste, die sich, wenn man die Seite aufruft, irgendwo in der Mitte (vertikal) befindet. Nun wünsche ich mir, dass wenn man nach unten scrollt, die Navigationsleiste nicht aus dem sichtbaren Bereich verschwindet, sondern, sobald sie am oberen Rand angekommen ist, dort "kleben bleibt". Also dann praktisch die CSS-Eigenschaft "position: static" zugewiesen bekommt.

Ich habe jedoch nur Grundkentnisse in JS. Das Zuweisen der Eigenschaft ist nicht das Problem, aber wie ermittel ich nun, wann die Navi-Leiste oben angekommen ist?

LG und schonmal Danke für jegliche Hilfe.
Majo

 

[Sentence]

Moin,
ich mach das mit JQuery, wenn dir das Hilft ;-)

CSS:

#sidebar {
        position: absolute;
        top: 200px;
        right: 20px;
        }

    #sidebar.fixed {
        position: fixed;
        top: 10px;
        }

JS (jQuery muss vorher geladen werden):

$(document).ready(function () {
        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
        $(window).scroll(function (event) {
            var t = $(this).scrollTop();
            if (t >= top) {
                $('#sidebar').addClass('fixed');
            } else {
                $('#sidebar').removeClass('fixed');
            }
        });
    });

MfG

 

[majo]

Danke, funktioniert!