增加案例列表滚动固定顶部

css/styles.css

@@ -684,6 +684,11 @@ dl, ol, ul{
   left: 50%;
   margin-left: -60px;
 }
+/*#mynav{
+  width:100%;
+  position:relative; 
+  z-index:99; 
+}*/
 .listNav{
   margin: 15px 0;
   height: 32px;

lists-ankui.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -192,5 +192,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-chongqing.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -352,5 +352,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-gansu.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li class="active"><a href="lists-gansu.html">甘肃</a></li>
@@ -782,5 +782,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-guangdong.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li class="active"><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -512,5 +512,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-guangxi.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -202,5 +202,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-guizhou.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -172,5 +172,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-hunan.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -162,5 +162,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-jiangxi.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -372,5 +372,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-neimeng.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -422,5 +422,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-shandong.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -162,5 +162,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-sichuan.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -322,5 +322,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-yunnan.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -172,5 +172,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>

lists-zhejiang.html

@@ -60,7 +60,7 @@
   </div>
   <div class="listBox">
     <div class="width1200">
-      <div class="listNav">
+      <div class="listNav" id="bignav">
         <ul class="clearfix">
           <li><a href="lists-guangdong.html">广东</a></li>
           <li><a href="lists-gansu.html">甘肃</a></li>
@@ -292,5 +292,31 @@
   <!-- JS. -->
   <script src="js/jquery/jquery-3.2.1.min.js"></script>
   <script src="js/global.js"></script>
+  <script type="text/javascript">
+      window.onscroll=function(){
+        var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
+        var bignav = document.getElementById("bignav");//获取到导航栏id
+        if(topScroll > 580){ //当滚动距离大于250px时执行下面的东西
+          bignav.style.position = 'fixed';
+          bignav.style.top = '0';
+          bignav.style.zIndex = '9999';
+        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
+          bignav.style.position = 'static';
+        }
+      }
+      /*解决浏览器兼容问题*/
+    function get_scrollTop_of_body(){ 
+        var scrollTop; 
+        if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离 
+            scrollTop = window.pageYOffset; 
+        }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        { 
+            scrollTop = document.documentElement.scrollTop; 
+        }else if(typeof document.body != 'undefined'){ 
+            scrollTop = document.body.scrollTop; 
+        } 
+        return scrollTop; 
+    } 
+
+    </script>
 </body>
 </html>