die änderung eines elements css position nach unten scrollen die Seite

Ich bin Herumspielen mit einigen jquery-versuchen in den Griff zu bekommen.

Ich habe ein ul-nav hat eine absolute position gesetzt, aber nachdem ich die Seite scrollen nach unten durch die 200 Pixel ich möchte, dass sich die Schalter auf position fixiert, so dass der nav bleibt immer auf der Seite.

Wie kann ich dies tun?

unten ist das Beispiel, das ich auf Arbeit bin

http://satbulsara.com/tests/

InformationsquelleAutor der Frage sat | 2011-02-05

  1. 13

    Vielen Dank an alle für so schnelle Hilfe

    dies ist, was ich wollte

    $(document).ready(function() {
    var theLoc = $('ul').position().top;
    $(window).scroll(function() {
        if(theLoc >= $(window).scrollTop()) {
            if($('ul').hasClass('fixed')) {
                $('ul').removeClass('fixed');
            }
        } else { 
            if(!$('ul').hasClass('fixed')) {
                $('ul').addClass('fixed');
            }
        }
    });
});

    ich habe es von

    http://www.defringe.com/

    http://satbulsara.com/tests/

    Thankss!!!!!

    InformationsquelleAutor der Antwort sat

  2. 4

    Schrieb ich das jQuery-plugingenau das zu tun.

    InformationsquelleAutor der Antwort Chris Heald

  3. 2

    Hier ist der code, den ich verwenden, um eine "sticky" - sidebar. Dann müssen Sie die IDs für Ihre markup.

    var sidebarScrollTop = 0; 

$(document).bereit(Funktion() { 
sidebarScrollTop = $("#sidebar").offset(); 

$(window).scroll(function () { 
var docScrollTop = $('body,html').scrollTop(); 

wenn(docScrollTop > sidebarScrollTop.oben) { 
$("#sidebar").css({ position: 'fixed', top: '0px' }); 
} else { 
$("#sidebar").css({ position: 'static' }); 
} 
}); 
}); 

$(window).resize(Funktion() { 
sidebarScrollTop = $("#sidebar").offset().top, 
}); 

$(document).resize(Funktion() { 
sidebarScrollTop = $("#sidebar").offset().top, 
});

    Im Grunde alles, was Sie tun müssen, ist, ändern Sie die #sidebar für die ID der sidebar-container. Dieser code wird sehen, ob das sidebar-element gescrollt oben auf dem Bildschirm. Wenn es ist, es ändert sich die position fixedund wenn es zurück auf die Seite erneut, wird die position zurückgegeben, an static (Standard).

    Den $(document).resize() und $(window).resize() Funktionen werden sicherstellen, dass die sidebar bleibt-stick am oberen Rand der Seite, wenn das Dokument/Fenster wird angepasst, beziehungsweise. Die Dokument-Funktion sorgen für die sidebar funktioniert ordnungsgemäß, auch wenn Sie jQuery-Animationen ändern der Größe von Elementen.

    InformationsquelleAutor der Antwort Bojangles

Schreibe einen Kommentar