ändern Sie die margin-top auf Blättern

habe ich eine negative Marge auf ein div, aber ich möchte zu ändern, die negative Marge auf Blättern, bis der negative Wert 0 erreicht.

aus:

margin:-150px 0 0 0;

zu: (auf Blättern)

margin:0px 0 0 0;

ich denke, es ist eine Art parallax-Effekt, wo ich bin auf der Suche nach und fand diese auf StackOverflow:
Ändern Sie die margin-top des div-basierend auf Fenster scrollen

ich dachte, so etwas wie dieses, aber es muss etwas leichter

$(window).scroll(function(){
if  ($(window).scrollTop() >= 1){ $('#three').css({margin:'-149px 0 0 0px'}); }
if  ($(window).scrollTop() >= 2){ $('#three').css({margin:'-148px 0 0 0px'}); }  
if  ($(window).scrollTop() >= 3){ $('#three').css({margin:'-147px 0 0 0px'}); }   
if  ($(window).scrollTop() >= 4){ $('#three').css({margin:'-146px 0 0 0px'}); }  
else { $('#three').css({margin:'-150px 0 0 0px'}); }
});

--

erstellt habe ich eine Geige mit der html - /css-basis

fiddle:
http://jsfiddle.net/qSe4e/

--

danke, dass du so viel in der erweiterten

  • ich sehe nur meine eigene Geige, und nicht Ihre veränderte 🙂
  • Sorry, aktualisiert es - jsfiddle.net/qSe4e/9 oder vielleicht jsfiddle.net/qSe4e/11
  • der erste war der trick, genial! tun Sie es platzieren möchten wie eine Antwort, damit ich es machen kann, die richtige Antwort? 🙂
  • Fügte hinzu, froh zu helfen.
InformationsquelleAutor Erwin van Ekeren | 2013-10-10
  1. 9

    Versuchen Sie es mit ein wenig Mathematik, um automatisch generieren alle Möglichkeiten (ähnlich wie der Versuch aber mit einer einzigen Zeile statt für jede Möglichkeit.

    Beispiel: http://jsfiddle.net/qSe4e/9/

    $(window).scroll(function(){
    var fromTop = $(window).scrollTop();
    $("#three").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px');
});
    • gute Lösung bro
    InformationsquelleAutor naththedeveloper
  2. 1

    Machen Sie es wie diese

    $(document).scroll(function () {
$("#three").animate({margin: "0px 0px 0px 0px"}, 3000);
});

    Demo-Fiddle

    • danke, Ihr in diese Richtung, aber ich möchte, dass, wenn die Schwimmer sanft, ich eddited meine Frage mit meiner eigenen Erkenntnisse, vielleicht erzählt die Geschichte ein bisschen besser
    • überprüfen Sie die aktualisierte Antwort, wenn Sie mehr wollen, langsamer, erhöhen Sie die Zeit Wert
    • Rex, diese funktionierte ebenso wie die Lösung der FDL, die Lösung der FDL einfach ausgestattet, ein bisschen mehr auf das, was ich suchte, aber ich danke Ihnen sehr viel für Ihre Hilfe!
    • das Hauptziel ist es, das problem zu lösen von jedem Ende 🙂
    • stimmt! trotzdem Liebe ich dein script und hätte eine Frage; jetzt ist das div nur animiert nach unten wenn du scrollst, ist es auch möglich, wenn Sie nach oben scrollen der div-animiert zurück an den minus-Marge?
    • ja, nur tun das Gegenteil
    • ich habe es ausprobiert, aber dann hält es über das animieren von: jsfiddle.net/qSe4e/12, ich habe auch versucht mit einem javascript, dass die tracks nach oben oder unten Blättern: jsfiddle.net/qSe4e/13

    InformationsquelleAutor Vinay Pratap Singh
Schreibe einen Kommentar