你能帮我解决这个问题吗?我尝试了其他问题的提示,但不幸的是这没有帮助。我想根据不同部分的背景颜色更改自定义汉堡菜单(带有悬停效果)的颜色。这是我的 HTML 和 CSS:
https://jsfiddle.net/s4gh8cw9/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<style>
.section {
width: 100%;
height: 450px;
background-color: white;
}
.section-black {
width: 100%;
height: 450px;
background-color: black;
}
.special-con {
cursor: pointer;
display: inline-block;
}
.bar {
display: block;
height: 2px;
width: 20px;
background: #000000;
margin: 5px auto;
}
.col {
display: inline-block;
width: 24%;
text-align: center;
height: auto;
position: fixed;
}
.bar {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.con:hover .arrow-top-fall {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.con:hover .arrow-bottom-fall {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
}
.special-con {
margin: 0 auto;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.special-con:hover .arrow-top-fall {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.arrow-bottom-fall,
.arrow-top-fall {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.special-con:hover .arrow-bottom-fall {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
</style>
<body>
<div class="section">
<div class="col">
<div class="special-con">
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE0MDYiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
<div class="bar arrow-top-fall"></div>
<div class="bar arrow-middle-fall"></div>
<div class="bar arrow-bottom-fall"></div>
</a>
</div>
</div>
</div>
<div class="section-black">
</div>
<div class="section">
</div>
<div class="section-black">
</div>
<div class="section">
</div>
<div class="section-black">
</div>
<div class="section">
</div>
</body>
</html>
非常感谢!
答案 0 :(得分:0)
您可以使用 Intersection Observer API 和其他一些库..
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
或者 航点库
https://github.com/imakewebthings/waypoints
希望对你有用
答案 1 :(得分:0)
我希望这段代码对你有用。
$(window)
.scroll(function () {
var scroll = $(window).scrollTop() + $(window).height() / 3;
$('.panel').each(function () {
var $this = $(this);
if (
$this.position().top <= scroll &&
$this.position().top + $this.height() > scroll
) {
$('body').removeClass(function (index, css) {
return (css.match(/(^|\s)color-\S+/g) || []).join(' ');
});
$('body').addClass('color-' + $(this).data('color'));
}
});
})
.scroll();
body {
color: #000;
background-color: #ffffff;
transition: all 0.4s linear;
text-align: center;
font-size: 120%;
line-height: 1.618;
}
.panel {
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
font-family: sans-serif;
position: relative;
}
.color-black .hamburger {
color: #fff;
}
.hamburger {
position: fixed;
top: 10px;
left: 10px;
color: #000;
}
.color-black {
background-color: #000000;
color: #fff;
}
h1 {
font-size: 4em;
line-height: 140%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel" data-color="white">
<div>
<h1>Hamburger Color Change</h1>
<a class="hamburger" href="javascript:void(0)">Hamburger</a>
</div>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 01</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 01</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 02</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 02</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 03</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 03</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 04</h2>
</div>