1、打开html开发工具，新建一个html代码页面，在html代码页面输入大量的文本内容，确保在浏览器上能有滚动条出现。
2、引入一个jquery.js库。在title标签后面创建一个script标签，然后引入jquery.js文件。
3、新建一个script标签，在这个标签里面创建使用$(window).scroll()监听滚动条滚动事件（案例中判断当滚动条滚动高度超过100的时候就出现一个弹出框）。
4、保存html代码后使用浏览器打开，然后滚动Y轴滚动条。
5、发现滚动到一定位置后会出现一个alert弹出框表示监听滚动条成功。
扩展资料
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，WPS来编写，也可以。不过存盘时请使用htm或html作为扩展名，这样就方便浏览器认出直接解释执行了。
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）。
任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
现今的 chrome 浏览器，为了实现丝滑顺畅地滑动，活动时间直接执行而不再检测默认事件，这使得无法用 e.preventDafult() 来阻止默认事件。
现在需要添加 {passive: false} 配置
$(document).addEventListener( 'scroll', fun, {passive: false} ) 把事件被动监听设置为 false 之后，就可以正常阻止默认事件了。
为了手动地使页面平滑滚动到某个高度，需要使用 $.animate({scrollTop: val}) 。由于不同浏览器间的差异，绑定 scrollTop 的 DOM 元素是不一样的，比如
为了解决这个差异，我们需要把 animate 同时绑定在两个节点上。 $('html, body').animate()
$().position() ———— 基于父元素，从自身的外边框为点。
$().offset() ———— 基于父元素，从自身内容为点。
$(window).height().width() ———— 获取窗口宽高。
因为使用的是监听 touchstar 和 touchend 方法，所以该方法只适用于移动端。
主要的思路就是监听“触摸开始”和“触摸结束”两个事件，分别获取事件当前的触摸点坐标和文档滚动的值，进行对比判断“触摸是否有滑动”以及“文档是否有滚动（到底）”，来执行需要的方法。下面说说几个注意点：
