这两天刚刚学习了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>

jquery 滚动条 scroll 和 animate出现的问题总结的更多相关文章

  1. jQuery检测滚动条(scroll)是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height()    获取整个页面的高度 $(window).height()   ...

  2. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  3. 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  4. 原创新闻 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  5. Perfect Scrollbar – 完美的 jQuery 滚动条插件

    Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...

  6. 15个带示例的jQuery滚动条插件

    1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

  7. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  8. IE & 自定义滚动条 & scroll

    IE & 自定义滚动条 & scroll 请问这种在 IE 下的自定义滚动条,是如何实现的? https://fairyever.gitee.io/d2-admin-preview/# ...

  9. jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Linux 系统运行级别

    Linux运行级别从0-6,共7个.  0:关机.不能将系统缺省运行级别设置为0,否则无法启动.  1:单用户模式,只允许root用户对系统进行维护.  2:多用户模式,但不能使用NFS(相当于Win ...

  2. php调试mysql信息。

    print_r(mysql_error());会返回执行myql的成功或者失败的信息.数据库的编码方式是UTF-8.获取手机号,返回的页面的编码是gb2312.需要转换

  3. eclipse - An internal error occurred during: "Running Android Lint"

    概述 也不晓得为什么,编译eclipse,设置打开,就自动报错: An internal error occurred during: "Running Android Lint" ...

  4. Ubuntu桌面版与服务器版有什么不同?

         提到安装Linux,Ubuntu可谓是最受欢迎的.为了满足每个人的需求,出现了不少版本或风格的Ubuntu;其中两项便是桌面版与服务器版.只要发布版本号一致,这两者从核心来说也就是相同的,唯 ...

  5. mysql 写数据操作几次硬盘?

    mysql 写数据步骤: 1:写入操作事物日志,持久化操作日志到磁盘,并且只是写在磁盘上一小块区域内的顺序io,不需要像随机io一样 在磁盘多个地方移动磁头 2:内存中事物日志持久化以后  ,写入的数 ...

  6. 武汉科技大学ACM：1001: 猴子选大王

    Problem Description n只猴子要选大王,选举方法如下:所有猴子按 1,2 ……… n 编号并按照顺序围成一圈,从第 k 个猴子起,由1开始报数,报到m时,该猴子就跳出圈外,下一只猴子 ...

  7. Dev-C++程序正确闪退问题

    只需要在主函数最后一句语句上面加一句getchar();即可

  8. 【C++学习之路】派生类的构造函数（一）

    一.简单派生类的构造函数 1.所谓简单派生类,就是指派生类中不包含基类的内嵌对象的派生类. 2.一般来说,这样的派生类的构造函数的形式是: student( int i, string nam, in ...

  9. view ondraw

    窗口发生重绘时会被应用程序的窗口框架给调用 要使输出的东西始终能在窗口中看到 就可以使用该函数  窗口从到有的时候就会产生WM_PAINT消息,让窗口发生重绘 这是程序就会执行到ONDRAW函数处 所 ...

  10. animation中的steps()逐帧动画

    在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...