html+jquery 实现门户固定顶部菜单栏背景透明，下滑滚动条时背景变白

本文链接：https://blog.csdn.net/njihkj/article/details/139681814

滚动条在顶部时：

滚动条下滑时：

1、html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="telephone=no" name="format-detection">
    <title>门户</title>
    <link href="/static/content/css/common.css" rel="stylesheet"> // 自己的css文件
    <link href="/static/content/css/overview.css" rel="stylesheet">// 自己的css文件
</head>
<body class="zh_cn">
<div class="wrap_head banner_top">
    <div class="head_con container">
        <ul class="menu_list">
            <li class="menu_item product_menu">
                <a class="txt font-weight" href="#">产品</a>
            </li>
            <li class="menu_item component_menu">
                <a class="txt font-weight" href="#">标题一</a>
            </li>
            <li class="menu_item">
                <a class="txt font-weight" href="#">标题二</a>
            </li>
            <li class="menu_item">
                <a class="txt font-weight" href="#">标题三</a>
            </li>
            <li class="menu_item">
                <a class="txt font-weight" href="#">标题四</a>
            </li>
            <li class="menu_item">
                <a class="txt font-weight" href="#">标题五</a>
            </li>
        </ul>
    </div>
</div>
<div class="jumbotron jumbotron_technology_banner" style="background-image:url('/static/content/images/portal/banner.png')">

</div>

2、css

.wrap_head {
  display:block;
  width:100%;
  height: 72px;
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  transition: top 0.2s linear;
  background: #fff;
}
.wrap_head::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  display: block;
  content: "";
  height: 1px;
  pointer-events: none;
  background: rgba(0,0,0,0.1);
}
.banner_top {
    background-color: rgba(255, 255, 255, 0.1);
}
.banner_top::after{
  display: none;
}
.head_con {
  position: relative;
  z-index: 99;
  display: block;
  height: 72px;
  margin: 0px auto;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.font-weight{
  font-weight: 500;
}
@media screen and (max-width: 1200px) {
  .container {
    width: 90vw;
  }
}

.menu_list {
  display: block;
  position: fixed;
  background: #fff;
  width: 260px;
  overflow: auto;
  top: 72px;
  bottom: 72px;
  left: 0;
  z-index: 98;
  transform: translate(-260px,0);
  opacity: 0.8;
  transition: opacity 0.25s ease-out;
}
.menu_list .menu_item .txt{
  display: block;
  padding: 12px 20px 12px 0;
  font-size: 16px;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  position: relative;
  z-index: 2;
}
.menu_list .menu_item .txt:after{
  display: none;
  content:"";
  height: 3px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0px;
  background: #147BD1;
  opacity: 0;
  transition: transform 0.2s ease-out,opacity 0.2s ease-out;
  transform-origin: 50% 0%;
  transform:scale(0.01,1);
}
.menu_list .menu_item:hover .txt:after {
  transform:scale(1,1);
  opacity: 1;
}
@media screen and (min-width: 992px) {
  .menu_list{
    width: auto;
    height: 72px;
    overflow: visible;
    opacity: 1 !important;
    position: absolute;
    left: 50%;
    text-align: center;
    top: 50%;
    cursor: pointer;
    background: transparent;
    transform: translate(-50%,-50%) !important;
    transition: none;
    white-space: nowrap;
  }
  .menu_list .menu_item {
    height: 72px;
    display: inline-block;
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
  }
  .menu_list .menu_item .txt {
    height: 72px;
    line-height: 72px;
    padding: 0;
  }
  .menu_list .menu_item .txt:after {
    display: block;
  }
}
@media screen and (max-width: 991px) {
  .menu_list .menu_item{
    display: block;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .menu_list .menu_item {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.jumbotron {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.jumbotron_technology_banner {
    height: 502px;
    line-height: 502px;
    top: -72px;
    font-size: 40px;
    color: #fff;
}

3、js（向下滚动时固定菜单）

<script src="/static/content/js/lib/jquery-3.7.1.min.js" type="text/javascript"></script>
<script>
// 向下滚动时固定菜单
    var p=0,
	t=0;
	$(window).scroll(function(){
		p=$(this).scrollTop();
		if(t!==p) {
			$(".banner_top").css({
				"background-color":"#FFFFFF"
			})
		} else {
			$(".banner_top").css({
				"background-color": "rgba(255, 255, 255, 0.1)"
			})
		}
	})
</script>

4、js（向下滚动时隐藏菜单，向上滚动时显示菜单）

<script src="/static/content/js/lib/jquery-3.7.1.min.js" type="text/javascript"></script>
<script>
// 向下滚动时固定菜单
    var p=0,
	t=0;
	$(window).scroll(function(){
		p=$(this).scrollTop();
		if(t<p){
			//下滚
			if (p > 72) {
				$(".wrap_head").css({
					"position":"fixed",
					"top": "-72px"
				});
			}
		} else{
			//上滚
			$(".wrap_head").css({
				"position":"fixed",
				"top": 0
			});
        }
		setTimeout(function(){ t = p ; },0)
	})
</script>