能名网

站长网--站长网|站长之家|站长站|站长资讯|网络资源|创业资讯|创业新闻|创业学院|创业平台|站长信息中心|软件开发|网站SEO|网站资源|网站优化|域名PR|网站权重|建站仿站|商标买卖|域名转让|软件下载|技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

实速互联
lyidc
查看: 275|回复: 3

[优化教程] 导航跟随滚动条置顶移动

[复制链接]
  • TA的每日心情
    开心
    4 天前
  • 签到天数: 909 天

    [LV.10]以坛为家III

    发表于 2020-2-16 14:07:44 | 显示全部楼层 |阅读模式
    实速互联
    1. <script src="***/jquery.js"></script>
    复制代码
    1. <script type="text/javascript">
    2. jQuery(document).ready(function() {
    3. var topmenu = jQuery("nav");
    4. var topmenu_top = topmenu.offset().top;
    5. reset_topmenu_top(topmenu, topmenu_top);
    6. jQuery(window).scroll(function() {
    7. reset_topmenu_top(topmenu, topmenu_top);
    8. });
    9. });
    10. function reset_topmenu_top(topmenu, topmenu_top) {
    11. var document_scroll_top = jQuery(document).scrollTop();
    12. if (document_scroll_top > topmenu_top) {
    13. topmenu.css({'position':'fixed','top':'0px'});
    14. }
    15. if (document_scroll_top <= topmenu_top) {
    16. topmenu.attr('style',{'top':topmenu_top+'px'});
    17. }
    18. }
    19. </script>
    复制代码
    1. <nav class="nav"> //这里的nav样式自己在CSS控制
    2. <div class="row">
    3. <div class="large-12 columns">
    4. <ul class="nav-bar">
    5. <li data-magellan-arrival="download" class="active"><a class="smooth" href="#download">Download</a></li><li data-magellan-arrival="getstarted" class=""><a class="smooth" href="#getstarted">Get started</a></li><li data-magellan-arrival="usage"><a class="smooth" href="#usage">Demos & Usage</a></li><li data-magellan-arrival="documentation"><a class="smooth" href="#documentation">Documentation</a></li><li data-magellan-arrival="themes"><a class="smooth" href="#themes">Themes</a></li><li data-magellan-arrival="development"><a class="smooth" href="#development">Development</a></li>
    6. </ul>
    7. </div>
    8. </div>
    9. </nav>
    复制代码


    感谢支持站长中国www.admincn.net源码下载和实速互联www.lyidc.com空间域名VPS主机服务器企业邮局,我们产品全线优惠香港云VPS1G内存30G硬盘999元域名注册COM50CN30购买空间帮忙备案更多优惠咨询QQ351576338,专业建站、仿站、网站维护价格面议保证质量。
    回复

    使用道具 举报

    该用户从未签到

    发表于 2020-3-5 13:40:14 | 显示全部楼层
    实速互联
    小弟默默的路过贵宝地~~
    感谢支持站长中国www.admincn.net源码下载和实速互联www.lyidc.com空间域名VPS主机服务器企业邮局,我们产品全线优惠香港云VPS1G内存30G硬盘999元域名注册COM50CN30购买空间帮忙备案更多优惠咨询QQ351576338,专业建站、仿站、网站维护价格面议保证质量。
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2020-3-14 15:07:13 | 显示全部楼层
    实速互联
    看帖、回帖、拿分、走人
    感谢支持站长中国www.admincn.net源码下载和实速互联www.lyidc.com空间域名VPS主机服务器企业邮局,我们产品全线优惠香港云VPS1G内存30G硬盘999元域名注册COM50CN30购买空间帮忙备案更多优惠咨询QQ351576338,专业建站、仿站、网站维护价格面议保证质量。
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2020-4-27 09:46:18 | 显示全部楼层
    实速互联
    突然觉得楼主说的很有道理,赞一个!
    感谢支持站长中国www.admincn.net源码下载和实速互联www.lyidc.com空间域名VPS主机服务器企业邮局,我们产品全线优惠香港云VPS1G内存30G硬盘999元域名注册COM50CN30购买空间帮忙备案更多优惠咨询QQ351576338,专业建站、仿站、网站维护价格面议保证质量。
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    站长网adminzg.com源码社区-免责声明
    01、本站所有资源均来源网络或程序作者提供和网友推荐收集整理而来,仅供学习和研究使用,我们不参与任何软件的制作及传播,如有侵犯你的版权,请联系管理员及时删除
    02、访问本站的用户必须明白,本站对下载资源不拥有任何权利,其版权归该软件、资源的拥有者所有。我们亦不为此承担任何法律责任。
    03、本站不保证资源的准确性、安全性和完整性;下载后请自行检查是否带有病毒,同时本站也不承担用户因使用这些下载资源对自己和他(她)人造成任何形式的损失或伤害。
    04、用户基于自愿的原则使用,本站仅提供用户之间技术交流的媒介,不对资源软件开发者及其所拥有网站或论坛上发布的内容负任何法律责任。用户应主动了解并自觉遵守所在国家或地区的法律法规。用户只要进入本站即被视为已经阅读、理解并同意本协议的各项条款。
    05、任何人未经本站的明确许可,任何人不得盗链本站资源;不得复制或仿造本站或者在非本站所属的服务器上建立镜像

    联系QQ
    点击这里给我发消息(站长网) ※ QQ群1:247310935 ※ Q群2:114585073 ※ 热线:
    站长中国

    lyidc

    QQ|申请友链||Archiver|手机版|小黑屋|站长网 ( 闽ICP备18022661号-6 )|赞助我们

    GMT+8, 2020-7-5 18:10 , Processed in 0.103135 second(s), 20 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表