jQuery 页面往复滚动切换主副导航

暂无标签

很早之前的代码了,切换效果效仿zhihu。
css和js都是外链的,用以下代码新建html文件可直接看效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq 滚动切换效果</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body style="height:3000px;">
<header>
    <div class="header-wrapper">
        <div class="main-header">
            <div class="container d-flex justify-content-between">
                <nav class="navbar navbar-expand-md">
                <a href=""><img src="https://www.cmsbj.cn/static/image/logo.jpg" alt="" width="50px"></a>
                  <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                      <li class="nav-item active">
                          <a href="/" class="nav-link">首页</a>
                    </li>
                    <!--li class="nav-item">
                      <a href="blog.php" class="nav-link">日志</a>
                    </li-->
                    <li class="nav-item">
                      <a href="https://www.cmsbj.cn/forum.php" class="nav-link">论坛</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link" id="top_nav_more" onclick="showMenu({'ctrlid':'top_nav_more','pos':'43!','cache':'1'})"><i class="fa fa-ellipsis-h"></i></a>
                    </li>
                    </ul>
                  </div> 
                  <form method="post" autocomplete="off" action="search.php?mod=blog" class="mr-3 d-none d-md-block">
                      <input type="hidden" name="formhash" value="d08781b8">
                  <div class="input-group">
                    <input name="srchtxt" size="65" maxlength="40" value="" class="search-input" placeholder="搜索你感兴趣的">
                    <input type="hidden" name="searchsubmit" value="yes">
                    <button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
                  </div>
                </form>
                <a href="https://www.cmsbj.cn/home.php?mod=spacecp&ac=blog" class="btn btn-primary">写日志</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <i class="fa fa-align-justify text-muted"></i>
                </button>
                </nav>
                <div class="header-login d-none d-md-flex align-items-center">
                    <div class="d-flex align-items-center">
                        <div class="notices mr-2">
                            <button type="button" class="btn btn-text"><i class="fa fa-star-o"></i></button>
                            <button type="button" class="btn btn-text"><i class="fa fa-envelope-o"></i></button>
                            <button type="button" class="btn btn-text"><i class="fa fa-bell-o"></i></button>
                        </div>
                        <div id="profile">
                            <button type="button" class="btn btn-text p-0 avatar-view border-0"><img src="https://www.cmsbj.cn/uc_server/avatar.php?uid=1&size=small" class="rounded" title="admin" width="32px" height="32px"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sub-header is-hidden">
            <div class="header-inner d-flex justify-content-between">
                <div class="d-flex align-items-center">
                    <a href="#" class="mr-3" title="" target="_blank"><img src="https://www.cmsbj.cn/uc_server/avatar.php?uid=1&size=small" class="rounded" width="32" height="32"></a>
                <div style="line-height:1.2;">
                    <div class="m-0"><a href="#" class="text-sm text-dark font-weight-bold" target="_blank">admin</a></div>
                    <div class="m-0"><a href="#" class="small text-muted">代码</a></div></div>
                </div>
                <div class="col ml-5">
                    <h5 class="h5 m-0 font-weight-bold">discuz ajaxpost提交表单</h5>
                </div>
                <button class="btn btn-text initialism">45 次阅读</button>
            </div>
        </div>
    </div>
</header>
<div style="height:300px"></div>
<div id="nav-switch-position">
    <center>滚动到我的位置时切换</center>
</div>
<script>
$(document).ready(function(){
  var this_height = $(document).scrollTop();
  var nav = $(".main-header");
  var nav_title = $(".sub-header");
  var have_height = $('#nav-switch-position').offset().top - $(window).scrollTop();
  $(window).scroll(function(){
    var do_height = $(document).scrollTop();
    if(do_height > have_height){
      nav.addClass('is-hidden').css({"width":"100%","top":"0","left":"0"}),
      nav_title.removeClass("is-hidden");
    }
    if(do_height < this_height){
      nav.removeClass("is-hidden").removeAttr("style"),
      nav_title.addClass("is-hidden");
    }
    this_height = $(document).scrollTop();
  });
});
</script>
<style>
body{background:#f5f5f5}
header .header-wrapper{width: 100%;height: 52px;z-index: 100;}
header .header-wrapper:after {content: "";position: fixed;top: 52px;left: 0;box-sizing: border-box;width: 100%;height: 1px;border-bottom: 1px solid rgba(30,35,42,.06);box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);z-index: 200;}
header .main-header{background: #fff;position: fixed;width: 100%;top: 0;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease,-webkit-transform .3s ease;z-index:200}
header .main-header.is-hidden{-webkit-transform: translateY(-100%);transform: translateY(-100%);}
header .header-inner{-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s,-webkit-transform .3s}
header nav{height: 52px;}
header nav .navbar-nav{margin:0 1.5rem;}
header a{font-size:15px;color: #8590a6;}
header .nav-item.active .nav-link{color: #444;}
header .search-input{background: #f6f6f6;transition: width .2s ease,background .3s ease;border: 1px solid #ebebeb;border-radius: 3px;width:300px;padding: 0.344rem 0.75rem;font-size: 14px;}
header .search-input:focus{color: #495057;background-color: #fff;border-color: #409eff;outline: 0;}
header .search-btn{font-size:14px;position: absolute;right:5px;top:6px;border: 0;background: transparent;}
header .header-login .fa{font-size:16px;}
header .sub-header{position: fixed;top: 0;left: 0;width: 100%;height: 52px;margin: 0 auto;background: #fff;overflow: hidden;z-index: 1;}
header .sub-header .header-inner{display: flex;align-items: center;width: 1000px;height: 100%;margin: 0 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
header .sub-header.is-hidden .header-inner{-webkit-transform: translateY(100%);transform: translateY(100%);}
header .notices button{position: relative;}
header .notices button em{position: absolute;top:2px;right:10px;background: #fe4c4c;padding:3px;line-height:8px;font-size: 11px;border-radius:5px;color: #fff;border: 2px solid #fff;}
</style>
</body>
</html>