浏览器的滚动条滚动时，导航条的背景变色

window.onscroll = function() {var headerMain = document.getElementById('headerMain');if(window.pageYOffset >= 70){headerMain.classList.add('headerMain-bg');} else {headerMain.classList.remove('headerMain-bg');}
}

在vue中：

mounted() {this.$nextTick(()=>{window.onscroll = function() {var headerMain = document.getElementById('header-main');if(window.pageYOffset >= 70){headerMain.classList.add('headerMain-bg');} else {headerMain.classList.remove('headerMain-bg');}}})}

然后在css中写样式：

.header-main.headerMain-bg{background: #fff;color: #333;a{color: inherit;}
}
.header-main{position: fixed;right: 0;top: 0;width: 100%;max-width: 1320px;height: 4.375em;margin: auto 0;padding: 0 2.4em;box-sizing: border-box;
}

浏览器的滚动条滚动时，导航条的背景变色相关推荐

iOS滚动的导航条(仿网易新闻)
实现效果效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动:下面的视图也可以滚动,滚动时上面对应的栏目要选中颜色为红色: 滚动的导航条包括两部分:标题滚动视图(UIScrollView),内容 ...
HTML中滚动条滚动时如何让上面的标题固定不动
在做web前端开发时,有时候需要滚动条滚动时让上面的标题固定不动.如果一开始在设计阶段html元素的层次结构是对的,通过在不同的节点设置overflow就很容易实现. 但是有时候一开始的层次结构设计的 ...
iOS源码学习-导航条加阴影，自定义导航条的背景图片
介绍: 给导航条的下方加上阴影,自定义导航条的背景图片. 适用环境:Xcode 4.3, iOS 5.0. 下载地址:github.com 更多源码,请访问开源苹果运行截图:
Jquery实现页面滚动时导航智能定位
页面滚动的时候,侧边辅助导航提示到对应的内容.尤其是对于内容很长的页面很好的一个体验. 借助jquery,可以轻松实现.  <div class=" ...
css滚动条外层轨道颜色不对,滚动条滚动时显示，不滚动时隐藏
像滚动条的控制样式我们基本知道,看下: ::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的 ...
java 滚动条滚动_广告条随滚动条的移动而移动
文章来源:蓝色理想跟随滚动条的图片#floater{ POSITION:absoJavaScript 文章来源:蓝色理想跟随滚动条的图片 #floater { POSITION: ab ...
导航栏随页面滚动html,实现随着滚动条滚动，导航会自动切换的效果
实现导航栏跟随滚动, 点击导航页面滚动到相应指定位置? 第一次写博客,还望指正不足:wo..菜鸟+1 简单的思路是: 导航菜单里, 通过给元素指定 data-socrll-id 属性, 来影射内 ...
jQuery 导航条置顶滚动渐变背景透明度
思路1 顶部导航条的背景透明度随着滚动条滚动的像素增加或者减少思路2 只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果问题1 顶部导航条要使用 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
仿网易新闻顶部菜单html,iOS仿网易新闻滚动导航条效果
本文实例为大家分享了iOS滚动导航条效果展示的具体代码,供大家参考,具体内容如下实现效果效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动:下面的视图也可以滚动,滚动时上面对应的栏目要选中颜 ...

浏览器的滚动条滚动时，导航条的背景变色

浏览器的滚动条滚动时，导航条的背景变色

浏览器的滚动条滚动时，导航条的背景变色相关推荐

最新文章

热门文章