微信小程序登录入口_jQuery完成的监听导航滚动置

jQuery实现的监听导航滚动置顶状态功能示例       这篇文章主要介绍了jQuery实现的监听导航滚动置顶状态功能,涉及基于jQuery的事件响应及状态监听等相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的监听导航滚动置顶状态功能。分享给大家供大家参考，具体如下：

1. js代码

 * Created by EDUASK on 2016/5/20.
$(function(){
 //引入id标签;
 var navtive=$("#native");
 //设置导航标签为置顶;
 var offsetTop=navtive.offset().top;
 //定义一个监听高度;
 var scrollHeight=$(document).scrollTop;
 fn(navtive,offsetTop);
 //设置监听事件;
 $(window).scroll(function(){
 fn(navtive,offsetTop);
 //调用方法;
 function fn(navtive,offsetTop){
 var scrollHeight=$(document).scrollTop();
 if(offsetTop scrollHeight){
 navtive.css("top",offsetTop);
 }else{
 navtive.css("top",scrollHeight);

2. html代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 监听导航滚动置顶 /title 
 !--css样式;-- 
 style type="text/css" 
 /*添加导航条的样式;
 #native{
 background: blue;
 width: 100%;
 height: 20px;
 color: red;
 position: absolute;
 top: 100px;
 left: 0;
 text-align: center;
 /style 
 script src="jquery/2.0.0/jquery.min.js" /script 
 script type="text/javascript" src="监听导航滚动置顶.js" 
 /script 
 /head 
 body 
 p id="top" ddddd /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 div id="native" 欢迎访问我的导航条 /div 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 a href="#top" rel="external nofollow" 回到顶部 /a 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 p aaaaaaaaaaaa /p 
 /body 
 /html 

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。