脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue滚动固定顶部及修改样式

vue滚动固定顶部及修改样式的实例代码

 更新时间：2019年05月30日 10:56:47   作者：中平签  
这篇文章主要介绍了vue滚动固定顶部及修改样式，本文给大家提到了滚动固定位置有多种方法,感兴趣的朋友跟随小编一起看看吧

滚动固定位置有多种方法

1 css3  粘性定位

position:sticky；
top:20px；

2直接position：fixed；给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度

3事件监听更改style中的position属性

**
修改样式

滚动监听事件中使用this.$refs.xxx.style.color=‘xxxx' 这种方式会报错

Uncaught TypeError: Cannot read property 'style' of undefined

所以通过动态绑定来解决。

具体：

**
html绑定

 <p class="ptop1" :style="pstyle">
    <img @click="back()" :src='topimgs'>
   </p>

data中设置属性

 data() {
  return {
   pstyle:{background:'#595552'},
   pastyle:{background:'#595552'},
   pbstyle:{background:'#fff'},
  };
 },

mounted中添加事件监听

window.addEventListener(“scroll”, this.handleScroll);

methods中添加方法，在方法中修改

 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop>100){
     this.pstyle=this.pbstyle;
    }else{
     this.pstyle=this.pastyle;
    }

总结

以上所述是小编给大家介绍的vue滚动固定顶部及修改样式的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • vue项目报错:Missing script:"serve"的解决办法

    vue项目报错:Missing script:"serve"的解决办法

    这篇文章主要给大家介绍了关于vue项目报错:Missing script:"serve"的解决办法,"missing script: serve"是一个错误信息,意味着在执行启动脚本时,找不到名为"serve"的脚本,需要的朋友可以参考下
    2023-11-11
  • VUE搭建手机商城心得和遇到的坑

    VUE搭建手机商城心得和遇到的坑

    这篇文章主要介绍了VUE搭建手机商城心得和遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 浅析Vue单文件组件与非单文件组件使用方法

    浅析Vue单文件组件与非单文件组件使用方法

    这篇文章主要介绍了Vue单文件组件与非单文件组件使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • vue项目打包:修改dist文件名方式

    vue项目打包:修改dist文件名方式

    这篇文章主要介绍了vue项目打包:修改dist文件名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue中提示$index is not defined错误的解决方式

    vue中提示$index is not defined错误的解决方式

    这篇文章主要介绍了vue中提示$index is not defined错误的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue项目在运行npm run build时卡住不动问题及解决方案

    vue项目在运行npm run build时卡住不动问题及解决方案

    这篇文章主要介绍了vue项目在运行npm run build时卡住不动问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • Vue2 响应式系统之数组

    Vue2 响应式系统之数组

    这篇文章主要介绍了Vue2 响应式系统之数组，本文接着上几篇文章Vue2响应式系统 、Vue2 响应式系统之分支切换，响应式系统之嵌套、响应式系统之深度响应 展开相关内容,需要的朋友可以参考一下
    2022-04-04
  • vue3中defineProps及使用方法详解

    vue3中defineProps及使用方法详解

    defineProps是Vue3中的一种新的组件数据传递方式,可以用于在子组件中定义接收哪些父组件的props,这篇文章给大家介绍vue3中defineProps及使用方法详解,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue前端实现导出页面为word的两种方法

    Vue前端实现导出页面为word的两种方法

    这篇文章主要介绍了Vue前端实现导出页面为word的两种方法,文中通过代码示例和图文介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-12-12
  • vue路由传参的基本实现方式小结【三种方式】

    vue路由传参的基本实现方式小结【三种方式】

    这篇文章主要介绍了vue路由传参的基本实现方式,结合实例形式总结分析了vue.js路由传参的三种实现方式,包括params显示传参、不显示参数以及query显示参数传参,需要的朋友可以参考下
    2020-02-02

最新评论