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

2019-11-19 13:26:00

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/code/HtmlJsRun测试运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

上一篇：javascript使用正则实现去掉字符串前面的所有0

下一篇：Vue Element 分组+多选+可搜索Select选择器实现示例