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

130 阅读 0 评论 86 点赞

我是靠谱客的博主淡然煎饼，最近开发中收集的这篇文章主要介绍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代码运行工具：http://tools.uoften.com/code/HtmlJsRun测试运行效果。

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

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