告别js用css实现滚动到一定位置时，导航栏置顶的效果。

<div class="nav">这里是导航栏所在的DIV容器。</div>

css代码：

.nav{
    position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
    top:0; /* 距离窗口顶部距离 */
    left:0; /* 距离窗口左边的距离 */
    width:100%; /* 宽度设置为100% */
    height:40px; /* 高度 */
    z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
 }

js版本置顶（19/07/29）

<style type="text/css">
    /*添加导航条的样式;
    */
     #native {
      background: blue;
      width: 100%;
      height: 20px;
      color: red;
      text-align: center;
    }

    .box {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      width: 100%;
      background: #fff;
      border-bottom: 1px solid #ebebeb;
      box-shadow: 0 0 5px #888;
    }
</style>
<body>
  <div id="native">悬浮置顶</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>
</body>
<script>
    //引入id标签;
    var navtive = $("#native");
    //设置监听事件;
    $(window).scroll(function () {
      var scrollHeight = $(document).scrollTop();
      console.log(scrollHeight)
      if (scrollHeight > 100) {
//添加类名样式
        navtive.addClass("box");
      } else if (scrollHeight == 0) {
//删除类名样式
        navtive.removeClass("box");
      }
//scrollHeight > 100 ? navtive.addClass("box") : navtive.removeClass("box");
    }); 
</script>

 

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生