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

一只蓝胖子~

于 2023-03-12 20:26:21 发布

阅读量223

点赞数

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

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

版权

<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,
  },
});