Wie erstellt man einen "onscroll" -Zustand und einen Leerlaufzustand für das gleiche Element?

Ich möchte wissen, wie man eine Position macht: fixed Element ändern Stil beim Scrollen und dann zurück in den "Leerlauf" -Zustand, wenn der Benutzer mit dem Scrollen aufhört. Bis jetzt habe ich nur Skripts gefunden, die das Element ändern, sobald das Scrollen erkannt wird, aber dann geht es nicht in den vorherigen Zustand zurück. Mein Ziel ist es, ein kleines Zeichen in der Mitte des Bildschirms zu haben Zustand, wenn der Benutzer nach unten scrollt, und ein Ruhezustand, wenn der Benutzer aufhört zu scrollen. Hier ist das, was ich so weit gekommen (nach dieser Website gesucht haben):Wie erstellt man einen "onscroll" -Zustand und einen Leerlaufzustand für das gleiche Element?

EDIT: Dank @TCHdvlp ich mein Dokument ändern könnte, aber ich kann immer noch nicht bekommen es funktioniert: S

Könnten Sie sagen, mir, was ich vermisse? Hier

ist, was ich habe:

<head> 


     <meta charset="utf-8"/> 
     <title>Knock Knock Megaman</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


     <style type="text/css"> 

     #wrapper{ 
      height: 1000px; 
     } 
     .fixedImg{ 
      position: fixed; 
      content:url(examples/images/meg1.png); 
      top:50%; 
      left: 50%; 
     } 
     .slideUp { 
      content:url(examples/images/Megaman2.png); 
      position: fixed; 
      top:50%; 
      left: 50%; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="wrapper"> 
     <div id="divimage" class="fixedImg"> 
     </div> 
     </div> 

     <script type="text/javascript"> 
     //when the begining of a scroll occurs on the document 
     $(document).on("scroll",(function(){ 
      //remove the fixed property via the class 
      $('#divimage').removeClass("fixedImg").addClass("slideUp"); 
     }); 
     //when the end of a scrolling occurs 
     $(document).on("scrollStop",(function(){ 
      //fix the element via the fixed class 
      $('#divimage').addClass("fixedImg").removeClass("slideUp"); 
     }); 
     </script> 
    </body> 
</html>

Quelle

2016-06-09 Kiuchi

Sie sollten JQuery verwenden, nicht nur sie erwähnen in den Tags;) Und, verwenden Sie CSS-Klassen.

Erstellen Sie eine feste Klasse, sagen wir fixedImg. Fügen Sie diese Klasse zu #divimage hinzu, und Sie haben jquery importiert, verwenden Sie es !!

Die Idee hier ist zu sagen, "Während ich auf der Seite scrollen, entfernen Sie das feste Attribut. Dann, wenn der Scroll gestoppt hat, wieder anhängen die feste Klasse".

//when the begining of a scroll occurs on the document 
$(document).on("scroll",(function(){ 
    //remove the fixed property via the class 
    $('#divimage').removeClass('fixedImg'); 
}); 
//when the end of a scrolling occurs 
$(document).on("scrollStop",(function(){ 
    //fix the element via the fixed class 
    $('#divimage').addClass('fixedImg'); 
});

Und natürlich, in der CSS-

.fixedImg { position : fixed; ..... }

Und natürlich bis, entfernen Sie diesen

#divimage : {position:fixed}

Quelle

2016-06-09 15:59:13 TCHdvlp

Vielen Dank für Ihre Hilfe! Ich habe meine Datei bearbeitet, konnte sie aber immer noch nicht zur Arbeit bringen: S Können Sie mir sagen, was ich vermisse? – Kiuchi

Sie wechseln zwischen '.fixedImg'- und' slideUp'-Klassen. Sie sind beide "Position: fixiert;". Es macht keinen Sinn, das zu tun !! Entfernen Sie die 'position: fixed;' aus '.slideUp' Klasse – TCHdvlp

Wie erstellt man einen "onscroll" -Zustand und einen Leerlaufzustand für das gleiche Element?

Antwort

Verwandte Themen