JQ控制html屏幕缓慢下滑

最新推荐文章于 2022-03-25 23:32:04 发布

赖赖赖先生

最新推荐文章于 2022-03-25 23:32:04 发布

阅读量624

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS html+css 文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42177117/article/details/121213310

CSS 同时被 2 个专栏收录

5 篇文章

订阅专栏

html+css

4 篇文章

订阅专栏

这段代码展示了如何使用jQuery监听窗口滚动事件，并实时更新一个类名为'.catta'的div元素的样式，使其随着滚动距离改变顶部外边距，实现了平滑的滚动效果。通过CSS3的过渡属性，确保了样式变化的流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="catta" style="height:5000px"></div>

<script type="text/javascript">
    $(window).scroll(function(event){
        var scrollH = $(this).scrollTop();  

        // console.log(scrollH);
            $(".catta").css({
          "margin-top": -scrollH,
          "-webkit-transition":"all 0.4s",
          // "transform":"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0," + -scrollH + ", 0, 1)"  
         }) 

       
    });
</script>