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;
<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>
var scrollTop = $(this).scrollTop();
if(scrollTop>50){
$("#header").addClass("ea55_com_header");
}else{
$(".ea55_com_header").removeClass("
有个需求:
导航
条是默认
背景色
, 页面向上
滑动
后,
导航
条变为有颜色的背景。动态给元素设置一个属性data-fixed,js判断
滚动
条
滑动
到200像素后。给属性设置个
css
样式。
CSS
3自定义
滚动
条-轩枫阁https://www.xuanfengge.com/demo/201311/scroll/
css
3-scroll.html
css
scrollbar样式设置 - SegmentFault 思否当块级内容区域超出块级元素范围的时候，就会以
滚动
条的形式展示，你可以
滚动
里面的内容，里面的内容不会超出块级区域范围。有时候我们需要自定义
滚动
条的样...https://segmentfault
<nav class="fh5co-nav" role="navigation">
<div class="top-menu">
<div class="container"&
在btn按钮的前后都加上伪元素before和after元素（宽度为0，不显示出来）
为鼠标添加hover，当鼠标悬停上去的时候给伪元素都设置宽度为100%
为其中之一的伪元素增加过渡效果transition，并且设置背景颜色
另一个伪元素不用设置过渡，得到立马变化的效果
<!DOCTYPE html>
<html lang="en">
<style>
.btn{
