当用户滚动时调整大小 Header

Question

这是我的代码，用于在滚动时重新调整 header 的大小，但它不是 working.The 没有将 header 设置为固定 size.But header 大小没有改变我使用 Javscript 和 css 来做到这一点，但它不能，请帮助我摆脱这个 error.I 结构，所以请有人帮助我。提前致谢

     <!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>

Answer 1

检查这个 fiddle : https://jsfiddle.net/b39gx6pa/2/

将JavaScript替换为：

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();

当用户滚动时调整大小 Header

resize Header when user scroll on

javascript

html

header

resize

onscroll