脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 导航栏固定顶部

JS滚动到指定位置导航栏固定顶部

 更新时间：2017年07月03日 15:48:36   作者：一个奕  
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享

最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享，上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>js滚动到指定位置导航栏固定顶部</title>
    <style type="text/css">
       body{height: 2500px; margin: 0; padding: 0;}
      .banner{height: 250px; width: 100%; background: #e5e5e5;}
      .bignav{width: 100%; background: #000;}
      .nav{ background:#000; width: 1200px; margin: 0 auto; height: 45px;}
      .nav a{display: block; width: 200px;float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px;}
    </style>
  </head>
  <body>
    <div class="banner">
    </div>
    <div class="bignav" id="bignav">
      <div class="nav">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
      </div>
    </div>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <script type="text/javascript">
      window.onscroll=function(){
        var topScroll =document.body.scrollTop;//滚动的距离,距离顶部的距离
        var bignav = document.getElementById("bignav");//获取到导航栏id
        if(topScroll > 250){ //当滚动距离大于250px时执行下面的东西
          bignav.style.position = 'fixed';
          bignav.style.top = '0';
          bignav.style.zIndex = '9999';
        }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
          bignav.style.position = 'static';
        }
      }
    </script>
  </body>
</html>

以上所述是小编给大家介绍的JS滚动到指定位置导航栏固定顶部，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 使用JavaScript实现轮播图效果完整实例

    使用JavaScript实现轮播图效果完整实例

    我们在各种网页中经常见到轮播图的效果,下面这篇文章主要给大家介绍了关于使用JavaScript实现轮播图效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • js实现倒计时关键代码

    js实现倒计时关键代码

    这篇文章主要为大家详细介绍了js实现倒计时的关键代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js跨域请求的5中解决方式

    js跨域请求的5中解决方式

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下
    2015-07-07
  • 统计出现最多的字符次数的js代码

    统计出现最多的字符次数的js代码

    一小段代码，经常出现在面试笔试题中的：统计一个字符串中出现最多的字符的次数，可以是英文或者数字。
    2010-12-12
  • 原生JS实现简单的倒计时功能示例

    原生JS实现简单的倒计时功能示例

    这篇文章主要介绍了原生JS实现简单的倒计时功能,涉及javascript基于定时器的日期时间运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • 用js制作淘宝放大镜效果

    用js制作淘宝放大镜效果

    这篇文章主要为大家详细介绍了js制作淘宝放大镜效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

    微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

    这篇文章主要介绍了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能,结合图文与实例形式详细分析了微信小程序选项卡切换相关操作实现技巧,需要的朋友可以参考下
    2019-05-05
  • JavaScript中的细节分析

    JavaScript中的细节分析

    高山登不上,不是因为体力不支,只因鞋里一粒。学习也是如此，因而有必要把JavaScript中常见的和与其它语言不同的那些细节学习一下
    2012-06-06
  • Next.js中处理时区的常用方案推荐

    Next.js中处理时区的常用方案推荐

    这篇文章主要为大家详细介绍了Next.js中处理时区的几种常用方案推荐,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-01-01
  • JS实现倒计时(天数、时、分、秒)

    JS实现倒计时(天数、时、分、秒)

    这篇文章主要为大家详细介绍了JS实现倒计时，精确到天数、时、分、秒，还为大家分享了parseInt() 函数的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论