如何通过滚动使标题的背景不透明

Question

我想在滚动过程中遮挡导航栏的背景颜色。 我的导航栏位于标题div 中。

实际上，当我滚动时，我的导航栏与内容混合在一起，我无法阅读任何内容。

我尝试了很多教程，但我的javascript知识很差，没有任何效果。

我只希望背景标题在页面顶部时不透明度为 0，滚动时变为 0.7。

感谢您的帮助。

/*sticky_navbar*/
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
$(window).scroll(function() {
var threshold = 200; // number of pixels before bottom of page that you want to start fading
var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
if (op <= 0) {
$("#header").hide();
} else {
$("#header").show();
}
$("#header").css("opacity", op);
});

#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 0.7);
z-index: 2;
}
.navbar {}
#Title {
margin: 0 auto 0 0;
height: 20px;
margin-top: 15px;
padding-left: 10px;
border-bottom: 1px solid white;
padding-top: 5px;
padding-bottom: 30px;
flex: 1;
}
#navbar {
overflow: hidden;
display: flex;
justify-content: flex-end;
border-bottom: 5px solid white;
padding-bottom: 10px;
padding-top: 15px;
}
.menu:nth-child(1) {
order: 1;
}
.menu:nth-child(2) {
order: 4;
}
.menu:nth-child(3) {
order: 3;
}
.menu:nth-child(4) {
order: 2;
}
.menu:nth-child(5) {
order: 5;
}
IMG.background {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 60%;
}
#navbar a {
display: block;
color: #FFF;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background: rgba(217, 78, 68, 0.5);
color: white;
}
.content {
padding: 16px;
color: #ddd;
background-color: #FFF
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar">
<div id="Title">
<a href="Accueil"><img src="IMAGES/PNG/logo.png" alt="logo" /></a>
</div>
<div id="navbar">
<div class="menu"> <a class="active" href="javascript:void(0)">Blog</a></div>
<div class="menu"> <a href="blog">Contact</a></div>
<div class="menu"> <a href="blog">L'électrophotonique</a></div>
<div class="menu"> <a href="blog">Qui sommes nous?</a></div>
</div>
</div>

Answer 1

除了Mattia所说的，我还创造了一支笔。我希望这有所帮助。

我还添加了一个 css 过渡，所以它淡出，但这只是个人喜好的问题。如果您愿意，您绝对可以删除它。

代码笔

更改如下： .css

#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 0);
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-ms-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
z-index: 2;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header.isSticky {
background: rgb(139, 139, 157, 0.7);
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-ms-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}

.js

$(document).ready(function(){// checks vertical position of scroll bar 
var scrollY = $(this).scrollTop();
// when user refreshes psge
if (scrollY > 0) {
// if it is anywhere but the top change opacity by adding class .isSticky
$('#header').addClass('isSticky');
} else {
$('#header').removeClass('isSticky');
}

$(window).on('scroll', function(){
// while uesr scrolls check the scrollTop position
var scrollY = $(this).scrollTop();
if (scrollY > 0) {
$('#header').addClass('isSticky');
} else {
$('#header').removeClass('isSticky');
}
});
});

Answer 2

只需通过检查元素偏移顶部，在滚动时使用 js 切换一个类(例如.isSticky(。

#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 0);
z-index: 2;
}
#header.isSticky {
background: rgba(139, 139, 157, 0.7);
}