Vueでスティッキーを実現するためのVueの単純な天井効果が機能しない代替手段

天井効果は vue プロジェクトで実現する必要がありますが、sticky は機能せず、v-sticky プラグインも機能しません。

データを調べた結果、スティッキーが機能しない理由は次のとおりであることがわかりました。

1) 親要素に overflow:hidden または overflow:auto が設定されている

2) 上、右、下、左の4つの値のいずれかが指定されていない

3) 親要素の高さがスティッキーで配置された要素の高さより小さい

Sticky プロパティは、ユーザーのスクロールに応じて、position:relative と Position:fixed の位置を切り替えます。要素の配置は、特定のしきい値を超えるまでは相対配置として動作し、それ以降は固定配置として動作します。

しかし、コンポーネントはすべて満足していますが、天井効果を達成することができず、まったく反応しません。忘れてください、コンポーネントと粘着は必要ありません。代替方法を自分で書いて、便利です後で必要に応じて変更します。

粘着性のある代替品

1. 効果シミュレーション:

2. アイデア: ナビゲーションが正常にスライドするとき、position:relative、コンポーネントとインターフェイスの上部の間の距離を検出し、上部にスライドすると、position:fixed、top:0px; をリセットして天井に達します。

3. コード:

<nav :style="stickyChange"></nav>

<script>
    export default {
        name: "MidNav",
        data(){
            return{
                stickyChange:"position:relative;z-index:0",
              }
        },
        methods:{
            getScroll(e){
                //手机端只能通过e.target.scrollTop获取组件的滑动距离
                let topDis = window.pageYOffset || document.documentElement.scrollTop || 
                             document.body.scrollTop||e.target.scrollTop;
                //此处660为测试组件滑动到顶部的距离；
                if (topDis>=660){
                    this.stickyChange="position:fixed;top:0px;opacity: 0.98;z-index:999";
                   
                }else{
                    this.stickyChange="position:relative;z-index:0";
  
                }
            },
        },
        mounted() {
            //添加动态监听
            window.addEventListener('scroll',this.getScroll,true);
        }
        
  }
</script>

手順: 1) 変更されたスタイル属性を設定します:style="stickyChange"

2) 変更されたデータを追加します: データバインディングスタイル属性、メソッドによるスタイルの変更、stickyChange: "位置: 相対; z-index: 0"

3) マウントされたメソッドにスライディングモニタリングを追加します。

window.addEventListener('scroll',this.getScroll,true);

4) 監視メソッドの実装: getScroll(e)

Vueでスティッキーを実現するためのVueの単純な天井効果が機能しない代替手段

粘着性のある代替品

おすすめ