效果好看的时间跟随导航分类栏

在很多网页中我们会遇到需要跟随的悬浮导航栏，今天小妖同学就跟大家分享一个作品（虽然原理比较简单，但是个人认为效果蛮好看的），希望大家喜欢~

下图是他的长相

大家可以想想看，这个样式的导航栏加上什么样子的效果比较好看一些，这是我的做法，是否和你想法一致呢？

有没有觉着这个效果加上左侧的线条和圆点很好看呢，感觉圆点在线上滑动着~

下面就是实现的具体代码

（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');
    });

到这里就结束了，很简单的一个小分享，希望你们喜欢~

效果好看的时间跟随导航分类栏

猜你喜欢