jQuery+css实现百度百科的页面导航效果_jquery

   
   
   
   




<script><br /> var slideInnerHeight = $('#sideCatalog-catalog dl').height();<br /> var slideOutHeight = $('#sideCatalog-catalog').height();<br /> var enableTop = slideInnerHeight - slideOutHeight;<br /> var step = 50;<br /> //点击向上的按钮<br /> $('#sideCatalog-down').bind('click', function () {<br /> if ($(this).hasClass('sideCatalog-down-enable')) {<br /> if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '-=' + step}, 'fast');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br /> } else {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br /> $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br /> }<br /> } else {<br /> return false;<br /> }<br /> })<br /> //点击向下的按钮<br /> $('#sideCatalog-up').bind('click', function () {<br /> if ($(this).hasClass('sideCatalog-up-enable')) {<br /> if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br /> } else {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br /> $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br /> }<br /> } else {<br /> return false;<br /> }<br /> }) <p> //点击导航中的各个目录<br /> $('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {<br /> var index = $(this).index();<br /> scrollSlide($(this), index);<br /> var ddId = $(this).find('a').stop().attr('href').substring(1);<br /> var windowTop = $('a[name="' + ddId + '"]').offset().top;<br /> $('body,html').animate({scrollTop: windowTop}, 'fast');<br /> $(this).addClass('heightlight').siblings('dd').removeClass('heightlight');<br /> }) <p> //滚动页面，即滚动条滚动<br /> $(document).scroll(function () {<br /> var len = $('.headline-1').length;<br /> for (var i=len-1; i>=0; i--) {<br /> if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height()) {<br /> var index = i;<br /> $('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');<br /> scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);<br /> return false;<br /> } else {<br /> $('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br /> }<br /> }<br /> }) <p> //导航的滚动，以及向上，向下按钮的显示隐藏<br /> function scrollSlide(that, index){<br /> if (index < 5) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br /> } else if (index > 11) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br /> } else {<br /> var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());<br /> $('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br /> }<br /> }<br /> </script>