“vue-fullpage.js“切换分屏时候让头部导航改变背景色

最新推荐文章于 2024-08-30 10:01:24 发布

一只桃子~

最新推荐文章于 2024-08-30 10:01:24 发布

阅读量283

点赞数

文章标签： javascript 前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43405603/article/details/129480440

版权

该文章讨论了一个Vue.js组件，它在页面滚动时改变固定头部的背景色。当用户离开顶部时，背景色会变为透明或指定颜色。同时，文章还介绍了轮播选项的配置，包括控制箭头、滚动速度、是否显示滚动条以及幻灯片导航。

摘要由CSDN通过智能技术生成

<Header style="position: fixed; height: 1rem" class="header" id="header" />





onMounted(() => {
  window.addEventListener("mousewheel", onLeave(index, aaaa));
});


const onLeave = (index, aaaa) => {
  let qcolor = document.getElementById("header");
  if (aaaa.index == 0) {
    qcolor.style.backgroundColor = "transparent"; //设置变量yBody的背景颜色为白色
  } else {
    qcolor.style.backgroundColor = "rgb(213 213 213)"; //设置变量yBody的背景颜色为白色
  }
};

const options = reactive({
  options: {
    //轮播可以横向滚动效果
    controlArrows: true, //用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消verticalCentered: false,   //每一页幻灯片的内容是否垂直居中
    resize: false, //字体是否随着窗口缩放而缩放
    scrollingSpeed: 500, //页面滚动速度
    scrollBar: false, //是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效
    slidesNavigation: true, //是否显示横向幻灯片的导航
    onLeave: onLeave,
  },
});