监听导航滚动置顶

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代码监听导航滚动置顶

ddddd

aaaaaaaaaaaa

欢迎访问我的导航条

aaaaaaaaaaaa

回到顶部

aaaaaaaaaaaa

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.zwyuanma.com/code/HtmlJsRun测试运行效果。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》希望本文所述对大家jQuery程序设计有所帮助。