feat: 表格头部置顶新增取消逻辑

src/utils/globalDirectives.js

@@ -32,7 +32,8 @@ Vue.directive('stickyed', {
     const $el = $(el)
     const conf = {
       className: ['fixed-nav'], // 置顶后添加的默认类名
-      startFixedTop: el.offsetTop // 从高度为startFixedTop处开始置顶，默认为元素距离顶部高度
+      startFixedTop: el.offsetTop, // 从高度为x处开始置顶，默认为元素距离顶部高度
+      forbid: false // 强制不显示
     }
 
     el.handleWindowScrollStickyEvent = function (e) {
@@ -43,13 +44,15 @@ Vue.directive('stickyed', {
       if (value && value.startFixedTop) {
         conf.startFixedTop = value.startFixedTop
       }
+      conf.forbid = !!value.forbid
 
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-      if (scrollTop >= conf.startFixedTop) {
+      if (scrollTop >= conf.startFixedTop && !conf.forbid) {
         $el.addClass(conf.className.join(' '))
       } else {
         $el.removeClass(conf.className.join(' '))
       }
+      el.windowScrollStickyEventCallback && el.windowScrollStickyEventCallback(el, conf)
     }
     window.addEventListener('scroll', el.handleWindowScrollStickyEvent, false)
   },

src/views/vipsubscribe/components/Contrast.vue

@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="contrast-main">
-      <ul class="contrast-main-header flex-r-c" v-stickyed="stickyed">
+      <ul class="contrast-main-header flex-r-c" ref="stickyHeader" v-stickyed="stickyed">
         <li class="top-title modify-left">功能/产品</li>
         <li class="top-title modify-center gray">免费订阅</li>
         <li class="top-title modify-right flex-r-c center">
@@ -113,12 +113,14 @@ export default {
     return {
       stickyed: {
         className: ['contrast-fixed'],
-        startFixedTop: 1000 // 从高度为startFixedTop处开始置顶
+        startFixedTop: 1000, // 从高度为startFixedTop处开始置顶
+        forbid: false
       }
     }
   },
   mounted () {
     setTimeout(this.calcStickyNav, 100)
+    this.$refs.stickyHeader.windowScrollStickyEventCallback = this.stickyCallback
   },
   methods: {
     calcStickyNav () {
@@ -126,6 +128,14 @@ export default {
       if (offset) {
         this.stickyed.startFixedTop = offset.top - 70
       }
+    },
+    stickyCallback () {
+      // 表格顶部固定
+      const tableDom = $(this.$refs.main)
+      const tableHeaderChangeDom = $(this.$refs.stickyHeader)
+      const tableMaxHeight = tableDom.height() + this.stickyed.startFixedTop - tableHeaderChangeDom.height()
+      const show = $(window).scrollTop() > this.stickyed.startFixedTop && $(window).scrollTop() < tableMaxHeight
+      this.stickyed.forbid = !show
     }
   }
 }
@@ -244,6 +254,7 @@ export default {
       display: none;
       padding: 0 30px;
       height: 68px;
+      flex-wrap: nowrap;
       .modify-left {
         width: 468px;
         height: 100%;