当前位置: 首页 > 工具软件 > fullPage.js > 使用案例 >

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

申宜
2023-12-01
<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,
  },
});
 类似资料: