触发onscroll事件

Original 2019-05-10 10:46:00 279
abstract:<!DOCTYPE html><html>         <head>         <title></title>    &nb

<!DOCTYPE html>

<html>

         <head>

         <title></title>

         <style type="text/css">

         *{margin:0 0;}

         .my_menu{

         width:100%;

         height:70px;

         background:#ccc;

         line-height:70px;

         text-align:center;

         }

         .my_body{

         width:100%;

         height:1600px;

         background:pink;

         }

         input{

                 border:1px solid #ccc;

                 width:500px;

                 height:30px;

                 border-radius:10px;

                 outline:none;

                 padding:2px 20px;

                 font-size:20px;

                 }

             .fix_menu{

                             width:100%;

                             height:70px;

                             background:#ccc;

                             line-height:70px;

                             text-align:center;

                             position:fixed;

                             display:none;

                             top:0;

                             }


                  </style>

             </head>

         <body>

         <div class="my_menu">

                      <input type="" name="">

         </div>

         <div class="fix_menu">

                      <input type="" name="">

         </div>

                      <div class="my_body">

         </div>

         <script type="text/javascript">

                     window.onload=function(){

                                  var dis_menu=document.getElementsByClassName('fix_menu');

                                    //当滚动栏坐标大于100px时触发事件

                                  window.onscroll=function(){

                                              if(document.documentElement.scrollTop>100){

                                                              dis_menu[0].style.display='block';

                                                          }

                                              else{

                                                         dis_menu[0].style.display='none';

                                                     }

                                        }

                               }

                       </script>

              </body>

    </html>


Correcting teacher:查无此人Correction time:2019-05-10 13:40:56
Teacher's summary:章节是html基础,你的作业都写成js事件了。厉害了,继续加油

Release Notes

Popular Entries