jquery blättern Sie zu einer px Zählung von oben und setzen Sie dann ein Div von oben für den Rest des Scrolls zu fixieren

Question

Ich bin auf der Suche nach einem div's CSS zu ändern, wenn ich zu einem bestimmten Punkt auf der Seite einen bestimmten Betrag scrollen von Pixeln vom oberen Rand der Seite.

Beim Laden der Seite hätte ich ein div statisch positioniert. Sobald ich anfing, die Seite herunterzuscrollen und einen Punkt von oben zu treffen (sagen wir 100px für Demozwecke), möchte ich das statische div so ändern, dass es wie 20px von oben fixiert wird. Was würde über die css() - Eigenschaft von jquery getan werden. Dies würde es erlauben, auf dieser festen 20px den ganzen Weg auf der Seite zu bleiben.

Welche jquery Eigenschaft kann ich verwenden, um zu wissen, wenn ich diese Marke 100px treffe. Ich möchte, dass dies auch rückgängig gemacht wird, sobald jemand wieder an die Spitze kommt, so dass das div wieder an den Ort gebracht wird, an dem es war, als die Seite geladen wurde und nicht 20px von oben.

Irgendwelche Ideen?

Answer 1

Sie the scroll() event verwenden könnte um den Code auszuführen, und the scrollTop() method zu sehen, wo Sie sind.

Hier ist eine Demo:http://jsfiddle.net/EahRx/

(ich die Werte verwendet, um Sie zur Verfügung gestellt, so dass ein Sprung da ist ich bin sicher, dass es in Ihrer aktuellen Seite besser aussehen wird..)

var fixed = false; 

$(document).scroll(function() { 
    if($(this).scrollTop() >= 100) { 
     if(!fixed) { 
      fixed = true; 
      $('#myDiv').css({position:'fixed',top:20}); // Or set top:20px; in CSS 
     }           // It won't matter when static 
    } else { 
     if(fixed) { 
      fixed = false; 
      $('#myDiv').css({position:'static'}); 
     } 
    } 
}); 

Die Variable fixed verhindert, dass der Code .css() öfter als erforderlich ausgeführt wird.

Answer 2

Try scrollTop mit:

$(window).scroll(function(){ 
    if ($(window).scrollTop() >= 100){ 
     //CSS changes go here 
    } 
}); 

Answer 3

Hier ist ein schönes jQuery-Plug-In, das ich gefunden habe und das nützliche Funktionen bietet.

http://code.google.com/p/sticky-panel/

Answer 4

Ich habe gerade this. Ich denke, das ist wirklich interessant. Ich mochte es.