mit einem einfachen jquery-script um ein div-Folgen Sie der Seite, auf Blättern

Ich versuche, dieses script hier: http://css-tricks.com/scrollfollow-sidebar/, um ein einfaches div folgt, dass die Fenster der Benutzer scrollt. Ich habe es von 0 bis topPadding und verändert topPadding zu topPadding*2, um die rechts oben versetzt.

Leider hat dies den Nebeneffekt, das Objekt, dass die Seite ein wenig länger und ermöglicht dem Anwender das scrollen unendlich. Dieser Fehler ist auch tatsächlich im original-code ohne meine größeren toppadding ändert sich, wenn man das Fenster klein genug ist.

Ich habe auch versucht ein anderes plugin für jquery, aber es hat überhaupt nicht funktioniert und das gibt mir, was ich brauche, so wie ich es beheben kann?

  • Sie verändert, was von 0 bis topPadding? Und es scheint zu funktionieren ok.
InformationsquelleAutor V_H | 2010-02-12
  1. 3

    Habe ich zusammengebastelt diese schnelle änderung, die Grenzen basierend auf dem Dokument Höhe. Ich bin nicht sicher, dass jQuery gibt eine genaue Höhe, damit eine Sicherheitsbarriere von 100px. Auch wenn die Höhe nicht ganz richtig ist, keine zusätzlichen Blättern begrenzt wird und sicherlich nicht unendlich.

    <script type="text/javascript">
    var documentHeight = 0;
    var topPadding = 15;
    $(function() {
        var offset = $("#sidebar").offset();
        documentHeight = $(document).height();
        $(window).scroll(function() {
            var sideBarHeight = $("#sidebar").height();
            if ($(window).scrollTop() > offset.top) {
                var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
                var maxPosition = documentHeight - (sideBarHeight + 100);
                if (newPosition > maxPosition) {
                    newPosition = maxPosition;
                }
                $("#sidebar").stop().animate({
                    marginTop: newPosition
                });
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
</script>
    InformationsquelleAutor Fenton
  2. 5

    Warum nicht einfach CSS verwenden.

    #theNonMovingDiv {position:absolute; position: fixed; top: Npx; right:Mpx}

    position:fixed; funktioniert nicht im ie6, aber mit position:absolute; geben Sie eine grobe Näherung.

    InformationsquelleAutor wheresrhys
  3. 0

    Kann ich doppelte Fehler in meinem browser (Firefox 3.5).

    Das problem ist, dass der code nicht zu sehen, wenn der Boden, die Seitenleiste fällt das Ende des Dokuments.

    Ihre beste Wette ist, verwenden Sie die .height() Methode zu überprüfen. Sie können die Höhe der sidebar (wie im Beispiel) als $("#sidebar").height(), und die Höhe des gesamten Dokuments als $(document).height().

    Was genau das Verhalten sein sollte-bis auf Sie. Es beinhaltet einen extra if, um sicherzustellen, dass alle Pixel Zeile bis rechts, aber auch design-Fragen, wie, wie die sidebar ausrichten soll gegen das untere Ende alles eine Frage des persönlichen Geschmacks.

    InformationsquelleAutor JXG
Schreibe einen Kommentar