Question

我尝试在滚动期间仅显示框阴影属性。我使用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"; 
}

会喜欢任何帮助！

Answer 1

您可以在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>

Answer 2

你可以使用jquery scroll方法作为

<script>
   $(function(){
       $(window).scroll(function(){
           if($(window).scrollTop()>=40){
                /*do something */
               scrollShadow();
           }
       });
   });

   function scrollShadow() {
       document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px     10px black"; 
  }
</script>

Answer 3

我首先要确保你不要在JS中添加CSS，它不应该住在那里。你可以通过在body中添加一个类来实现你想要的，然后在CSS中定位。最后，没有本地方式知道用户是否已停止滚动。唯一的方法是定义一个超时，除非用户滚动，否则将删除该类，从而取消原始超时并定义新的超时。最好确保窗口已完全加载，否则您将定位尚未存在的元素。以下示例应该是您所需要的：

window.addEventListener('load', function(){

    var timeout = null;
    var body = document.querySelector('body');
    var scrollClass = 'scrolled';

    window.addEventListener('scroll', function(){
        clearTimeout(timeout);
        body.classList.add(scrollClass);

        timeout = setTimeout(function(){
            body.classList.remove(scrollClass);
        }, 250);
    });

});

body {
  height: 2000px;
}

.sidenav {
    height: 100%;
    width: 280px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: skyblue;
    overflow-x: hidden;
    padding-top: 10px;
    transition: box-shadow 500ms ease-in-out;
}

.scrolled .sidenav{
    box-shadow: 3px 0px 10px #000;
}

<div class="sidenav"></div>

这应该达到你想要的。

汤姆

仅在滚动期间使属性可见

3 个答案: