Größe ändern Header, wenn Benutzer scrollen auf

Hier ist mein Code, um die Größe der Kopfzeile auf scrollen auf, aber es funktioniert nicht. Die Header nicht auf feste Größe gesetzt.Aber die Header-Größe ändert sich nicht, ich habe Javscript und css, um dies zu tun, aber es ist nicht kann einige bitte helfen Sie mir, diesen Fehler loszuwerden. Ich struct bei diesem so bitte einige können mir helfen. Vielen Dank im VorausGröße ändern Header, wenn Benutzer scrollen auf

 <!DOCTYPE html> 

     <html lang="en"> 


     <head> 


     <title>Request Us Your Requirment</title> 




      <link rel="stylesheet" href="css/style.css" /> 

     <script src="js/classie.js"> 
     </script> 

      <script> 

      function init() { 

      window.addEventListener('scroll', function(e){ 

      var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 300, 
      header = document.querySelector("header"); 
       if (distanceY > shrinkOn) { 

       classie.add(header,"smaller"); 

        } 
       else { 

       if (classie.has(header,"smaller")) { 

       classie.remove(header,"smaller"); 

        } 

         } 

         }); 

         } 

       window.onload = init(); 

       </script> 

       </head> 




       <body> 


       <div id="wrapper"> 


        <header> 

       <div class="container clearfix"> 

       <h1 id="logo"> 
        My Site 
       </h1> 

        <nav> 

        <a href="">Services</a> 

       <a href="">About Us</a> 

       <a href="">Contact Us</a> 

        </nav> 

       </div> 

        </header> 


        <div id="main"> 

        <div id="content"> 

       <section> 

       <div class="container"> 

        <h1>Request Us Your Requirement</h1> 

         <p>Building a website is a time consuming process.But not now Just get your professional website by contsct us</p> 

       <p>We will Provide the best web sites with less cost and within the time.</p> 

         <p> 
        <a href="http://www.facebook.com/vinod.dirishala">Follow Us On FB</a><br> 

        <a href="http://www.twitter.com/vinod.dirishala">Follows Us On Twitter</a> 
      </p> 

        </div> 

       </section> 

        <section class="color"> 

       <div class="container"> 

      <h1>Why My Site!</h1> 

      <p>We will provide Best Quality Webstes</p> 

      <p>Low Cost</p> 

      <p> How to contact Us</p> 

       </div> 

      </section> 

      </div> 

       </div> 



       <footer> 

       <div id="info-bar"> 

        <div class="container clearfix"> 

        <span class="all-tutorials"> 

        </div> 

         </div> 

         </footer> 




         </div> 



         </body> 

          </html>

Quelle

2016-03-26 Vinod Chowdary Dirishala

schaffen Geige für eine bessere Hilfe –

hier ist mein jsfiddle https://jsfiddle.net/VinodD/b39gx6pa/ –

Kontrolle dieser Geige: https://jsfiddle.net/b39gx6pa/2/

Ersetzen Sie JavaScript mit diesem:

function init() {  
    window.addEventListener('scroll', function(e){  
     var distanceY = window.pageYOffset || document.documentElement.scrollTop,shrinkOn = 300,header = document.querySelector("header"); 

     if (distanceY > header.clientHeight/3) {    
      classie.add(header,"smaller");   
     }else {   
      if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     } 
    }); 
} 

window.onload = init();

Quelle

2016-03-26 19:50:25

kannst du mir bitte erklären, wie der Code funktioniert? –

Größe ändern Header, wenn Benutzer scrollen auf

Antwort

Verwandte Themen