jQuery实现的监听导航滚动置顶状态功能示例


Posted in jQuery onJuly 23, 2018

本文实例讲述了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="http://libs.baidu.com/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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行效果。

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

jQuery 相关文章推荐
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP 翻页 实例代码
2009/08/07 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jquery动态添加option示例
2013/12/30 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python判断windows隐藏文件的方法
2014/03/21 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
查看Django和flask版本的方法
2018/05/14 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
店铺转让协议书
2014/12/02 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android