在很多网页中我们会遇到需要跟随的悬浮导航栏，今天小妖同学就跟大家分享一个作品（虽然原理比较简单，但是个人认为效果蛮好看的），希望大家喜欢~
下图是他的长相
大家可以想想看，这个样式的导航栏加上什么样子的效果比较好看一些，这是我的做法，是否和你想法一致呢？
有没有觉着这个效果加上左侧的线条和圆点很好看呢，感觉圆点在线上滑动着~
下面就是实现的具体代码
（1）HTML代码
<div class="search-time"> <div class="search-chooselist"> <div class="timeBox"> <p class="bigTime"><i class="search-circle"></i><span>2018</span></p> <ul class="bigTimeList"> <li><a href="#">第 1 期（12）</a></li> <li><a href="#">第 2 期（18）</a></li> </ul> </div> <div class="timeBox"> <p class="bigTime"><i class="search-circle"></i><span>2017</span></p> <ul class="bigTimeList"> <li><a href="#">第 1 期（12）</a></li> <li><a href="#">第 2 期（18）</a></li> <li><a href="#">第 3 期（12）</a></li> <li><a href="#">第 4 期（18）</a></li> <li><a href="#">第 5 期（12）</a></li> <li><a href="#">第 6 期（18）</a></li> <li><a href="#">第 7 期（12）</a></li> <li><a href="#">第 8 期（18）</a></li> </ul> </div> <div class="timeBox"> <p class="bigTime"><i class="search-circle"></i><span>2016</span></p> <ul class="bigTimeList"> <li><a href="#">第 1 期（12）</a></li> <li><a href="#">第 2 期（18）</a></li> <li><a href="#">第 3 期（12）</a></li> <li><a href="#">第 4 期（18）</a></li> <li><a href="#">第 5 期（12）</a></li> <li><a href="#">第 6 期（18）</a></li> </ul> </div> <div class="timeBox"> <p class="bigTime"><i class="search-circle"></i><span>2015</span></p> <ul class="bigTimeList"> <li><a href="#">第 1 期（12）</a></li> <li><a href="#">第 2 期（18）</a></li> <li><a href="#">第 3 期（12）</a></li> <li><a href="#">第 4 期（18）</a></li> </ul> </div> <div class="timeBox"> <p class="bigTime"><i class="search-circle"></i><span>2014</span></p> <ul class="bigTimeList nobor"> <li class="search-selected"><a href="#">第 1 期（12）</a></li> <li><a href="#">第 2 期（18）</a></li> <li><a href="#">第 3 期（12）</a></li> <li><a href="#">第 4 期（18）</a></li> <li><a href="#">第 5 期（12）</a></li> <li><a href="#">第 6 期（18）</a></li> <li><a href="#">第 7 期（12）</a></li> </ul> </div> </div> </div>（2）CSS
body{ height:2000px; } ul{ list-style: none; } a,a:hover{ text-decoration: none; } a:hover{ color:#e4393c; } .search-time{ box-sizing: border-box; border-top:2px solid #084870; border-bottom:2px solid #084870; padding:20px 20px 0; background:#ECECEC; width:210px; margin-top:20px; } .sortfixed{ position:fixed; z-index: 5555; } .sort-contentfixed{ margin-left:210px; } .search-chooselist{ border-left:1px solid #75ACD6; padding-left:22px; } .search-chooselist .bigTime{ color:#75acd6; font-size:24px; position:relative; margin:0; } .search-chooselist .bigTime span{ position:relative; top:-9px; } .search-circle{ display: inline-block; width:16px; height:16px; border-radius: 50%; background:#75ACD6; position:absolute; top:0px; left:-30px; } .bigTimeList{ border-bottom: 1px dashed #BFBFBF; margin-bottom: 16px; padding:10px 0 14px; } .search-chooselist .nobor{ border:0; } .bigTimeList li{ margin-bottom: 6px; } .bigTimeList li.search-selected a{ color:#75ACD6; }（3）jQuery的代码
//跟随导航 var height=0; if($(".search-time").length > 0){ height = height = $('.search-time').offset().top; $(window).scroll(function() { var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值 if(w > height) { $(".search-time").addClass("sortfixed"); $('.sort-content').addClass('sort-contentfixed'); }else if(w <= 0){ $(".search-time").removeClass("sortfixed"); $('.sort-content').removeClass('sort-contentfixed'); }else{ $(".search-time").removeClass("sortfixed"); $('.sort-content').removeClass('sort-contentfixed'); } }); } //年份展现 $('.bigTimeList').hide(); var date=new Date; var year=date.getFullYear(); for(var i=0;i<$('.timeBox').length;i++){ if($('.timeBox').eq(i).find('.bigTime').find('span').text()==year){ $('.timeBox').eq(i).find('.bigTimeList').show(); $('.timeBox').eq(i).find('.bigTimeList').addClass('shownow nowshow'); } } $('.bigTime').on('click',function(){ $(this).siblings('.bigTimeList').slideDown().show().addClass('nowshow'); $(this).parent().siblings('.timeBox').find('.nowshow').slideUp().show().removeClass('nowshow'); });到这里就结束了，很简单的一个小分享，希望你们喜欢~
