Question

我的目标是根据滚动位置实时为类的添加/删除添加动画效果。在此Fiddle中，当滚动条到达页面底部时，带有蓝色边框的红色框将变为带有紫色边框的黄色框。我喜欢这样，但是我想要发生的是将该过渡链接到滚动位置并在滚动条向下移动时实时发生。因此，它将是一种淡入淡出效果，其速度和位置由滚动条的位置确定。如何做到这一点？我将不胜感激任何帮助。谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TEST SITE ONE</title>
    <meta name="description" content="Test Site">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<style>

    html {
  box-sizing: border-box;
}


*, *:before, *:after {
  box-sizing: inherit;
}


* {
    margin: 0;
    padding: 0;
}

body{
    display: block;
}


.box1{
position: fixed;
height: 100vh;
width: 100vw;
max-width: 100%;
background-color: red;
border: 2vw solid blue;
}

.box1add{
    background-color: gold;
    border: 2vw solid purple;
}


.box2{

position: absolute;
height: 200vh;
width: 25vw;
background-color: orange;
border: 2vw solid green;
margin-left: 37.5vw;
margin-right: 37.5vw;

}
</style>


    <script>
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
     //console.log(scroll);
    if (scroll >= $(window).height()) {
        //console.log('a');
        $(".box1").addClass("box1add");
    } else {
        //console.log('a');
        $(".box1").removeClass("box1add");
    }
});
    </script>


<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

动画类通过滚动位置实时添加/删除？

0 个答案: