machen div-stick an den oberen Rand des Bildschirms und stoppen, bevor Sie auf die Fußzeile

Ich versuche eine div-stick auf die Kopfzeile, sobald der Nutzer begonnen hat, nach unten scrollen die Seite .
Ich fand das Beispiel
Wie kann ich einen div-stick an den oberen Rand des Bildschirms, wenn Sie erst einmal gescrollt?

Ich benutzte den code, hat 24 Stimmen . Live-demo.

PROBLEME :
1. Ich möchte, um die div zu stoppen, bevor Sie auf die Fußzeile. ich will nicht zu zeigen, dass es über den footer .
2. Ich weiß nicht, warum das funktioniert mit jquery 1.3.2 aber nicht mit 1.5.2 oder höher .

natürlich jede andere jquery-code /plugin oder ideea wäre toll!

  • die offset () - Funktion geändert. Sie konnte Sie einfach entfernen Sie die {scroll:false}, und ich denke, es funktioniert in JQ 1.5.
  • Dank Gerben ! das klappte ! entfernen {scrollen kannst:false} gemacht, es funktioniert mit JQ 1.5.2
InformationsquelleAutor mr.Liviu.V | 2011-10-19
  1. 4
    $(window).load($(function()
{
    var elem = $("#scroller");
    var top = elem.offset().top;
    var maxTop = $("#footer").offset().top - elem.height();
    var scrollHandler = function()
    {
      var scrollTop = $(window).scrollTop();
      if (scrollTop<top) {
        elem.css({position:"relative",top:""})//should be "static" I think
      } else if (scrollTop>maxTop) {
        elem.css({position:"absolute",top:(maxTop+"px")})
      } else {
        elem.css({position:"fixed",top:"0px"})
      }
    }
    $(window).scroll(scrollHandler);scrollHandler()

}));

    fiddle: http://fiddle.jshell.net/3ATzd/2/show/
    Nur denken ist es nicht, wie die margin-top auf #scroller. Ich habe auch entfernt die Notwendigkeit für die scroller-anchor-element, so können Sie diese entfernen.

    • Super Arbeit!!! .. aber du hast Recht .. es mag nicht margin-top . und wenn wir eine Höhe von 600px auf den scroller, wir würden sehen, dass es geht über die Fußzeile .. aber nur 10px oder so . fiddle.jshell.net/3ATzd/5/show
    • Ein schmutziger trick wäre dieses : var maxTop = $("#footer").offset().top - elem.height() - 10;
    • auch fand ich dieses : kitchen.net-perspective.com/open-source/scroll-follow, Aber bitte fühlen Sie sich frei zu teilen, alle anderen info und vielen Dank !
    • Sie konnte einfach padding-top. Oder top:"0px" nach oben:"10px", und maxTop=... zu maxTop=-10...
    InformationsquelleAutor Gerben
Schreibe einen Kommentar