jquery 滚动条 scroll 和 animate出现的问题总结

最新推荐文章于 2023-11-08 15:16:52 发布

akya8707

最新推荐文章于 2023-11-08 15:16:52 发布

阅读量375

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Shinnosuke/p/5757343.html

版权

这两天刚刚学习了jquery就想把平时做看到的一些相关效果用新的知识写写看。知识平时看着都懂，实际操作中问题才会层出不穷。

<!DOCTYPE html>
<html>
<head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .result{
        width: 100%;
        height: 50px;
        background: #ccc;
        position: fixed;
        top: -50px;
    }

</style>

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.slim.min.js"></script>

</head>


<body style="height:4500px;">
    <div class="result"></div>
<script>

//出现问题： 1、每次scroll都使动画反复触发，解决这个问题使用动画的 stop()，
//              这个方法主要是为了停止所有指定元素上运行的动画
//              两个参数,第一个参数删除队列动画，第二参数是让当前正在执行的动画立即完成，并且
//              重设show和hide的原始延时，调用回调函数,示例：
//              $("#div").stop(); 停止当前动画，继续下一个动画
//              $("#div").stop(true) 停止元素的所有的动画
//              $("#div").stop(false, true) 让当前动画直接到达末状态，继续下一个动画
//              $("#div").stop(true, true) 清楚所有动画，让当前动画直接到达末尾状态
//              到这一步能基本解决问题了，但是观察效果的时候发现进入动画的时候还是
//              有点卡顿的问题。主要原因在下面。
//           
//           2、第二个问题也是因为scroll每次触发会引起上百次的操作，为了优化操作，网友提示
//              使用节流阀，不然scroll每次都在触发。节约资源，其中提供了
//              https://segmentfault.com/a/1190000002764479 函数防抖与节流的优秀文章。
//              
$(function(){
     
    var fs = true;
        
    $(window).scroll(function(event) {

        if( $(window).scrollTop() > 50 ){
            
            if(fs){
                
                $(".result").stop().animate({
                    top: 0
                },300);

                fs = false;
            }
        }
        else{

            $(".result").stop().animate({
                top: "-50px"
            },300);

            fs = true;
        }
    });
 });
</script>

</body>
</html>

转载于:https://www.cnblogs.com/Shinnosuke/p/5757343.html

akya8707

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 滚动条 scroll 和 animate出现的问题总结

这两天刚刚学习了jquery就想把平时做看到的一些相关效果用新的知识写写看。知识平时看着都懂，实际操作中问题才会层出不穷。<!DOCTYPE html><html><head><style> *{ margin: 0; padding: 0; } .result{ ...
复制链接

扫一扫