CSS布局——导航栏悬浮滚动更改背景色

图片演示

网页上下滚动前

网页上下滚动后

html代码

    <!-- 第一大部分 --><div class="bg1"><!-- 导航栏 --><div class="nav" ><div class="box"><div class="logo"><img src="data:images/logo.png"></div><div class="nav-text"><a href="">产品</a><a href="">行业方案</a><a href="">客户成功</a><a href="">云市场</a><a href="">服务与认证</a><a href="">合作伙伴</a><a href="">商城</a><a href="">关于</a></div><div class="nav-right"><img src="data:images/serch.png" alt=""><a class="sousuo" href="#">登录</a><a class="zhuce" href="#">注册</a></div></div></div></div><!-- 第二大部分 --><div class="bg2"></div>

css代码

* {margin: 0;padding: 0;
}
body{background-color: #eeeeee;
}/* 大banner */
.bg1 {width: 100%;background-color: lightblue;height: 560px;background-repeat:no-repeat;
}
/* 导航栏 */
.nav {width: 100%;height: 70px;position: fixed;background-color: transparent;
}
/* 导航栏 鼠标移动到位置变更颜色 */
.nav:hover {background-color: #111111;
}
/* 导航栏内部组件 */
.nav .box {width: 1200px;height: 70px;margin: 0 auto;display: flex;
}
/* 导航栏-logo */
.nav .box .logo {height: 70%;width: 200px;margin: auto;
}
.nav .box .logo img{height: 100%;width: auto;
}
/* 导航栏-标签 */
.nav .box .nav-text {text-align: center;margin: auto;
}.nav .box .nav-text a {display: inline-block;line-height: 70px;margin-right: 20px;font-size: 20px;color: #ffffff;font-weight: 500;text-decoration: none;
}.nav .box .nav-right {height: 70%;width: 200px;margin: auto;display: flex;
}.nav .box .nav-right img{width: auto;height: 50%;margin: auto;
}
.nav .box .nav-right .sousuo {padding: 5px 20px 5px 20px;background-color: #0086F2;font-size: 15px;color: #FFFFFF;font-weight: 500;margin: auto;text-decoration: none;border-radius: 5px;
}
.nav .box .nav-right .zhuce {padding: 5px 20px 5px 20px;background-color: #0086F2;font-size: 15px;color: #FFFFFF;font-weight: 500;margin: auto;text-decoration: none;border-radius: 5px;
}/* 第二大部分 */
.bg2 {width: 100%;height: 864px;background-color: lightgoldenrodyellow;
}

js代码

    <script>function scroll() {var top = $(".bg1").offset().top;//获取导航栏变色的位置距顶部的高度var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度if (scrollTop <= top) {$('.nav').css('background-color', 'transparent');} else {$('.nav').css('background-color', '#111111');}}$(window).on('scroll', function() {scroll()});</script>

CSS布局——导航栏悬浮滚动更改背景色相关推荐

仿小米导航栏；导航栏悬浮滚动更改背景色javascript实现；
一.实现效果小米字体没引用,导航栏文字随便调的,仅供参考二.代码 1.html <!DOCTYPE html> <html lang="en">< ...
css设置导航栏背景颜色,更改bootstrap导航栏背景颜色和字体颜色
3 个答案: 答案 0 :(得分:46) 我使用以下CSS成功设置了Bootstrap导航栏的样式.你也没有在CSS中定义任何字体,这就是字体没有改变的原因.可以在here找到使用此CSS的网站. . ...
CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
HTML+CSS伸缩式导航栏
HTML+CSS伸缩式导航栏几天制作伸缩式导航栏首先确立一个结构接下来是html代码 <!DOCTYPE html> <html><head><meta ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
[RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

CSS布局——导航栏悬浮滚动更改背景色

CSS布局——导航栏悬浮滚动更改背景色相关推荐

最新文章

热门文章