修改顶部

src/main/resources/static/css/base/base.pc.css

@@ -7,6 +7,7 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .h5Only{display:none!important;}
 /*微信二维码样式*/
 iframe{width:320px !important;height: 280px !important}
+#globalHead.fiexd{width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 99999;}
 .impowerBox{width:320px !important;}
 .impowerBox .qrcode {width: 200px !important;}
 .impowerBox .title {display: none;}

src/main/resources/static/js/base.js

@@ -48,6 +48,7 @@ var globalHead = new Vue({
         userIdentity:'',
         articleType: '',
         topMenuList:[],
+        isFiexd:false,
         TabList:[
             {name:'产品',link:'/product/instrument.html',value:'1'},
             {name:'仪器',link:'/product/instrument.html',value:'2'}
@@ -198,11 +199,22 @@ var globalHead = new Vue({
         this.articleType = getUrlParam("type");
     },
     mounted:function(){
+        var _self = this;
         var userData = JSON.parse(window.localStorage.getItem('userInfo'));
         if(userData!=null){
             this.userIdentity = userData.userIdentity;
             this.shopId = userData.shopId;
         }
+        $(window).on('scroll', function() {
+            var scrollTop = $(this).scrollTop();
+            console.log(scrollTop);
+            if(scrollTop>100){
+                _self.isFiexd = true;
+
+            }else{
+                _self.isFiexd = false;
+            }
+        })
     }
 });
 // 初始化效果

src/main/resources/templates/components/header.html

@@ -1,4 +1,4 @@
-<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
+<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml" :class="isFiexd ? 'fiexd': ''">
     <!--顶部导航-->
     <div class="baseHeadTop">
         <div class="wrap clear">