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

xiaoxiao2021-02-28  18

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

    下图是他的长相

    

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

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

    下面就是实现的具体代码

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

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

转载请注明原文地址: https://www.6miu.com/read-2150176.html

最新回复(0)