jQuery實現頁面導航內容定位效果,並支援內容切換
阿新 • • 發佈:2020-07-23
需求
頁面向下滾動時,需要將頂部的搜尋欄資訊和導航選單吸頂,並且,搜尋欄資訊和導航選單之間可以切換。
效果
https://www.iguopin.com/index.php?m=&c=index&a=index
程式碼實現
HTML
<div class="nav-search"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="../public/images/igplogo2.png" class="header-brand"> </a> </div> <div class="right_part noprint"> <form class="ip-group"> <div class="ip-box"> <div class="type"> <div class="text"></div> <i class="layui-icon layui-icon-down" style="font-size: 18px;cursor: pointer;"></i> <div class="dpdown"> <div class="option" id="1">社會招聘</div> <div class="option" id="2">校園招聘</div> <div class="option" id="3">高階職位</div> <div class="option" id="4">實習職位</div> </div> </div> <input type="text" name="jobkey" id="top_search_input" value="" placeholder="請輸入職位或企業名稱"/> </div> <input type="submit" class="ip-btn" value="搜尋"> <input type="hidden" name="act" id="top_search_type" value="QS_jobslist"/> </form> <div class="nav-btn"> <span class="nav-text">導航</span> <span class="iconfont icon-other"></span> </div> <div class="qrcodes"> <img class="qrcode qr1" src="../public/images/index/gp_qrcode.png"></img> <img class="qrcode qr2" src="../public/images/index/gpfb_qrcode.png"></img> <div class="qrcode-tip-box"> <span class="tip1 active">關注最新招聘資訊</span> <span class="tip2">獲取簡歷投遞狀態</span> </div> </div> <div class="clear"></div> </div> </div> </div> ... ... ... <div class="link-nav"> <div class="container"> <ul class="nav navbar-nav site_link"> <li><a target="_blank" href="www.iguopin.com">國聘行動</a></li> <li><a target="_blank" href="https://zhaogong.iguopin.com/">線上招工</a></li> <li><a target="_blank" href="https://zhaogong.iguopin.com/abroad">一帶一路</a></li> </ul> <div class="clearfix"></div> </div> </div>
css
.nav-search { width: 100%; background-color: #fff; z-index: 1000; } .navbar .container .navbar-header { margin-right: 0; float: none; margin-left: 0; width: 20%; } .navbar .container .right_part { align-items: center; width: 80%; } .nav-btn { float: right; display: none; width: 70px; margin-left: 40px; font-size: 16px; color: #c90808; line-height: 85px; cursor: pointer; } .nav-search-fixed { position: fixed; top: 0; -webkit-box-shadow: 2px 2px 10px #ccc; box-shadow: 2px 2px 10px #ccc; } .nav-search-fixed .navbar-header { display: none; } .navbar .nav-search-fixed .container .right_part { width: 100%; } .navbar .nav-search-fixed .container .right_part .ip-group { margin-left: 100px; } .nav-search-fixed .nav-btn { display: inline-block; position: relative; top: 2px; } ... ... ... .link-nav { width: 100%; border-bottom: 2px solid #c90808; background: #fff; box-sizing: border-box; height: 72px; .container { width: 1200px; margin: 0 auto; height: 72px; box-sizing: border-box; .navbar-nav { width: 100%; height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; list-style: none; > li { float: left; position: relative; display: block; padding: 0; margin: 0; line-height: 72px; list-style-type: none; box-sizing: border-box; } } > .avatar-li { &:hover { .dropdown-menu { display: block; } } } } } } .container-fixed { position: fixed; z-index: 1000; width: 1070px; top: 0; .navbar-nav { height: 120px; line-height: 120px; > li { line-height: 120px; &.active, &:hover { height: 120px; } } } } .clearfix { zoom: 1; display: block; } } .link-nav-fixed { width: 1200px; margin: 0 auto; }
JS
$(function () { // 導航吸頂 fixedNav(); $(window).scroll(function () { fixedNav(); }) }); // 頁面滾動到一定高度,固定頂部導航 var flag = false; function fixedNav() { var top = $(document).scrollTop(); if (top >= 212) { $('.nav-search').addClass('nav-search-fixed'); navChange(); } else { $('.nav-search').removeClass('nav-search-fixed'); $('.ip-group').show(); $('.qrcodes').show(); $('.container').removeClass('container-fixed'); $('.link-nav').removeClass('link-nav-fixed'); } }; // 定位導航內容切換 $('.nav-btn').click(function () { flag = !flag; navChange(); }); function navChange() { if (flag) { $('.nav-text').text("搜尋"); $('.nav-btn').children('.iconfont').removeClass('icon-other').addClass('icon-search'); $('.ip-group').hide(); $('.qrcodes').hide(); $('.link-nav').addClass('link-nav-fixed'); $('.container').addClass('container-fixed'); } else { $('.nav-text').text("導航"); $('.nav-btn').children('.iconfont').removeClass('icon-search').addClass('icon-other'); $('.ip-group').show(); $('.qrcodes').show(); $('.link-nav').removeClass('link-nav-fixed'); $('.container').removeClass('container-fixed'); } }
總結
主要是scroll, scrollTop(), click, show(), hide方法和position: fixed等屬性的理解和使用。需要注意的是,一開始就呼叫fixedNav(),是用於當頁面重新整理且未滾動,但頁面已不在頂部的位置時(也就是重新整理頁面後看不到頂部導航的位置),出現吸頂的導航的效果。