我正在尝试使框阴影属性仅在滚动期间可见。我正在使用 HTML、CSS 和 JS。
我希望阴影在滚动时出现一个小的过渡，然后在停止时消失。
到目前为止我一直在使用这段代码:
<head>
<title>website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav" onscroll="scrollShadow()"></div>
CSS
.sidenav {
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: skyblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
js
function scrollShadow() {
document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px 10px black";
}
希望得到任何帮助!
最佳答案
您可以在 body 上设置一个类并使用 CSS 为元素设置样式，而不是设置更难管理的样式属性(尤其是当您想要影响多个元素时) .
(function iife() {
var body = document.body;
var timer;
window.addEventListener('scroll', function onScroll() {
clearTimeout(timer);
body.classList.add('scrolling');
timer = setTimeout(function removeClass() {
body.classList.remove('scrolling');
}, 150);
}, false);
})();*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 5000px;
background: lightgrey;
transition: background 5s;
}
.scrolling #container {
background: red;
}
#fix {
position: fixed;
top: 50px;
left: 50px;
height: 120px;
width: 20px;
background: white;
transition: all 300ms ease 0s;
}
.scrolling #fix {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
transform: translateY(-3px);
}<div id="container">
<div id="fix"></div>
</div>关于javascript - 使属性可见，仅在滚动期间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42166785/