Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 拖动的页面 滚动导航固定上方
Blogger Information
Blog 14
fans 0
comment 0
visits 8050
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
拖动的页面 滚动导航固定上方
「flasky」
Original
512 people have browsed it

拖动的页面 滚动导航固定上方

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .bg-img{
  12.             background: url("http://9yin2.woniu.com/static/web201703/images/bg.jpg")  center top repeat;
  13.             width: 100%;
  14.             height: 1080px;
  15.         }
  17.         .top-p{
  18.             width: 100%;
  19.             height: 130px;
  20.             background: rgba(30, 33, 35,0.8);
  22.         }
  24.         .w-100{
  25.             width: 100%;
  26.         }
  28.         .op-02{
  29.             opacity: 0.2;
  30.         }
  32.         .white{
  33.             color: white;
  34.         }
  36.         .d-flex{
  37.             display: flex;
  38.         }
  40.         .just-btw{
  41.             justify-content: space-between;
  42.         }
  43.         .just-round{
  44.             justify-content: space-around;
  45.         }
  46.         .just-center{
  47.             justify-content: center;
  48.         }
  50.         .pd-1{
  51.             padding: 5px;
  52.         }
  54.         .pd-2{
  55.             padding: 10px;
  56.         }
  58.         .pd-3{
  59.             padding: 15px;
  60.         }
  62.         .pd-4{
  63.             padding: 20px;
  64.         }
  66.         .pd-5{
  67.             padding: 25px;
  68.         }
  70.         .pd-6{
  71.             padding: 30px;
  72.         }
  75.         .mr-1{
  76.             margin: 5px;
  77.         }
  79.         .mr-2{
  80.             margin: 10px;
  81.         }
  83.         .mr-3{
  84.             margin: 15px;
  85.         }
  87.         .mr-4{
  88.             margin: 20px;
  89.         }
  91.         .mr-5{
  92.             margin: 25px;
  93.         }
  95.         .mr-6{
  96.             margin: 30px;
  97.         }
  99.         .f-size-14{
  100.             font-size: 14px;
  101.         }
  103.         .f-size-16{
  104.             font-size: 16px;
  105.         }
  107.         .f-size-18{
  108.             font-size: 18px;
  109.         }
  111.         .f-size-20{
  112.             font-size: 20px;
  113.         }
  115.         .f-size-12{
  116.             font-size: 12px;
  117.         }
  119.         .cursor{
  120.             cursor:pointer;
  121.         }
  123.         .inde{
  124.             z-index: -1;
  125.         }
  127.         .new-box{
  128.             width: 100%;
  129.             height: 1072px;
  130.             display: block;
  131.             background: url("http://9yin2.woniu.com/static/web201703/images/p2_bg.jpg") center top repeat;
  132.         }
  134.         .feature-box{
  135.             width: 100%;
  136.             height: 1113px;
  137.             background: url("http://9yin2.woniu.com/static/web201703/images/p3_bg.jpg") center top repeat;
  138.         }
  140.         .w-1200{
  141.             width: 1200px;
  143.         }
  145.         .m-center{
  146.             margin: 10px auto;
  148.         }
  149.         .pos-abv{
  150.             position: absolute;
  151.         }
  152.     </style>
  153. </head>
  154. <body>
  155. <div id="top"><img src="http://9yin.woniu.com/static/web201588/images/bg.jpg?v1" alt=""></div>
  157. <section class="pos-abv w-100" id="nav">
  158.     <div class="d-flex just-btw w-100 top-p">
  159.         <div><img src="http://9yin2.woniu.com/static/web201703/images/logo.png" alt=""></div>
  160.         <div class="d-flex  just-round f-size-18 white">
  161.             <div class="mr-4 cursor">
  162.                 <p class="">官网首页</p><p>HOME</p>
  163.             </div>
  164.             <div class="mr-4 cursor">
  165.                 <p>新闻资讯</p><p>NEWS</p>
  166.             </div>
  167.             <div class="mr-4 cursor">
  168.                 <p>研发手札</p><p>DEV SKETCH</p>
  169.             </div>
  170.             <div class="mr-4 cursor">
  171.                 <p>官方论坛</p><p>FORUM</p>
  172.             </div>
  173.             <div class="mr-4 cursor">
  174.                 <p>蜗牛游戏</p><p>GAME</p>
  175.             </div>
  176.         </div>
  177.     </div>
  178.     <div>
  179.         <div>
  180.             <img src="http://9yin2.woniu.com/static/web201703/images/slogan.png" alt="">
  181.         </div>
  182.     </div>
  183. </section>
  185. <div id="myMain">
  186.     <section class="bg-img"></section>
  187. <section class="new-box">
  188.     <div class="w-1200 m-center pd-6">
  189.         <img src="https://img.php.cn/upload/image/136/485/911/1638173810418146.gif" alt="">
  190.     </div>
  191. </section>
  193. <section class="feature-box">
  194. <div class="w-1200 m-center pd-6 w">
  195.     <img src="https://img.php.cn/upload/image/407/312/793/1638173840327201.gif" alt="">
  196. </div>
  197. </section>
  198. </div>
  200. <script>
  201. window.onload = function (){
  202.     var top =document.getElementById('top')
  203.     var myMain =document.getElementById('myMain')
  205.     var nav = document.getElementById('nav')
  207.      window.onscroll = function (){
  209.         if (document.documentElement.scrollTop>=top.offsetHeight){
  210.             nav.style.cssText="position:fixed;top:0px;";
  211.         }else {
  212.             nav.style.cssText="position:static;";
  213.             myMain.style.marginTop ='0px';
  214.         }
  216.      }
  217. }
  220. </script>
  221. </body>
  222. </html>

图片占位

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post