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实现前端分页功能
Mar 23 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery实现抽奖功能
Oct 22 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
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
表单内同名元素的控制
2006/11/22 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
javascript闭包的理解
2015/04/01 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
JS判断数组那点事
2017/10/10 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python自动扫雷实现方法
2015/07/25 Python
python实现简单遗传算法
2018/03/19 Python
Python sorted排序方法如何实现
2020/03/31 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
水务局局长岗位职责
2013/11/28 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
单位作风建设自查报告
2014/10/23 职场文书
小班上学期个人总结
2015/02/12 职场文书