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

编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
这篇文章主要介绍了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="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代码运行工具:测试运行效果。

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

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板