這篇文章主要介紹JS如何解決position:sticky的兼容性問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站設計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元溫州做網(wǎng)站,已為上家服務,為溫州各地企業(yè)和個人服務,聯(lián)系電話:18980820575

在項目中有用到sticky的布局，可是由于兼容性問題，在安卓端沒有很好的兼容，所以為了徹底解決這個問題只能寫一個組件來解決這個麻煩的問題，這里為什么是組件而不是指令是因為，是有原因的，下面會講到。

position:sticky的兼容性以及作用

Caniuse上顯示sticky的兼容性如下：

Sticky的作用相當于relative和fixed的結合體，當修飾的目標節(jié)點再屏幕中時表現(xiàn)為relative，當要超出的時候是fixed的形式展現(xiàn)，因為這個特性，我們就可以來實現(xiàn)一個sticky的模擬效果。

sticky組件實現(xiàn)

template部分

代碼解讀：這里我使用了組件來實現(xiàn)，而不用指令來實現(xiàn)的原因是：指令雖然是無侵入性的，更方便使用，可是有一個弊端就是當修飾的節(jié)點fixed的時候會脫離文檔流，會改變滾動的條的高度，如果僅僅是配合原生滾動條來實現(xiàn)是沒問題的（當然這也會存在滾動過快的問題），可是由于是配合自定義滾動所以，采取這種折中的方式來實現(xiàn)。最外層是一個sticky層，判斷瀏覽器是否支持sticky，不支持就使用relative來代替，這樣也就不會改變?yōu)g覽器高度的情況了，然后動態(tài)改變stick-warp層的postion來實現(xiàn)效果。

css部分

  .sticky {
    width: 100%;
    .sticky-warp {
      width: 100%;
      background: inherit;
      will-change: change;
      height: inherit;
      top: inherit;
    }
  }

代碼解讀：這里的warp層的背景色設置和sticky一致，這樣過渡不會太生硬，高度和top都根據(jù)用戶對外層sticky的自定義來實現(xiàn)，這樣這部分簡單用css就可以完成了。

JS部分

  export default {
    data () {
      return {}
    },
    computed: {
      getPosition(){
        var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
        return 'position:' + position;
      }
    },
    props: {},
    beforeMount () {
    },
    mounted(){
      this.init();
    },
    deactivated(){
      if(this.cssSupport('position', 'sticky')) {
        return;
      }
      /*復位*/
      var elWarp = this.$el.querySelector('.sticky-warp');
      elWarp.position = 'absolute';
    },
    methods: {
      init(){
        if (this.cssSupport('position', 'sticky')) {
          return;
        }
        var el = this.$el, target = this.$el.parentNode,
            elWarp = this.$el.querySelector('.sticky-warp'),
            top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);
        this.addScrollListen(target, (event)=> {
          if (el.getBoundingClientRect().top <= top) {
            elWarp.style.position = 'fixed';
          }
          if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
            elWarp.style.position = 'absolute';
          }
        })
      },
      cssSupport: function (attr, value) {
        var element = document.createElement('div');
        if (attr in element.style) {
          element.style[attr] = value;
          return element.style[attr] === value;
        } else {
          return false;
        }
      },
      getNumberValue(pxValue){
        var value = String(pxValue).match(/^\-?\+?[0-9]+/g);
        return value ? Number(value) : undefined;
      },
      addScrollListen(target, cb){
        target.addEventListener('y-scroll', (event)=> {
          cb && cb(event);
        });
      }
    },
  }

 

代碼解讀：這里面主要先用cssSupport來判斷一下瀏覽器的支持情況，然后通過多自定義滾動y-scroll事件的監(jiān)聽，監(jiān)聽top值的改變來實現(xiàn)sticky-warp層的fixed和absolute的轉換。大概原理的思路及實現(xiàn)過程就是上面這樣，對于自定義的滾動的github地址：https://github.com/yejiaming/scroll，sticky組件以及原生滾動下的指令參考的實現(xiàn)的github地址如下：https://github.com/yejiaming/sticky

以上是“JS如何解決position:sticky的兼容性問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！