Question

我想知道如何创建一个位置：滚动时修复元素更改样式，然后在用户停止滚动时返回“空闲”状态。 到目前为止，我只发现在检测到滚动后立即更改元素的脚本，但之后它不再回到之前的状态我的目标是在屏幕中央有一个小字符，当用户向下滚动时有一个运行状态，当用户停止滚动时有一个空闲状态。这是我到目前为止（搜索过这个网站后）：

编辑：感谢@TCHdvlp我可以修改我的文档，但我仍然无法让它工作：S

你能告诉我我错过了什么吗？

这就是我所拥有的：

    <head>


        <meta charset="utf-8"/>
        <title>Knock Knock Megaman</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <style type="text/css">

        #wrapper{
            height: 1000px;
        }
        .fixedImg{
            position: fixed;
            content:url(examples/images/meg1.png);
            top:50%;
            left: 50%;
        }
        .slideUp {
            content:url(examples/images/Megaman2.png);
            position: fixed;
            top:50%;
            left: 50%;
           }
        </style>
    </head>
    <body>

        <div id="wrapper">
        <div id="divimage" class="fixedImg">
        </div>
        </div>

        <script type="text/javascript">
        //when the begining of a scroll occurs on the document
        $(document).on("scroll",(function(){
            //remove the fixed property via the class
            $('#divimage').removeClass("fixedImg").addClass("slideUp");
        });
        //when the end of a scrolling occurs
        $(document).on("scrollStop",(function(){
            //fix the element via the fixed class
            $('#divimage').addClass("fixedImg").removeClass("slideUp");
        });
        </script>
    </body>
</html>

Answer 1

你应该使用Jquery，而不仅仅是在标签中提及它;）并使用css类。

创建一个固定的类，比如fixedImg。将此类添加到#divimage，并且已导入jquery，使用它!!

这里的想法是说，“当我在页面上滚动时，删除固定属性。然后，如果滚动停止，重新附加固定类”。

//when the begining of a scroll occurs on the document
$(document).on("scroll",(function(){
    //remove the fixed property via the class
    $('#divimage').removeClass('fixedImg');
});
//when the end of a scrolling occurs
$(document).on("scrollStop",(function(){
    //fix the element via the fixed class
    $('#divimage').addClass('fixedImg');
});

当然，在css中

.fixedImg { position : fixed; ..... }

当然，之二，删除此

#divimage : {position:fixed}

如何为同一元素创建“onscroll”状态和空闲状态？

1 个答案: