jQuery+css实现百度百科的页面导航效果(6)

//导航的滚动，以及向上，向下按钮的显示隐藏
    function scrollSlide(that, index){
        if (index < 5) {
            $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
            $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            $('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
        } else if (index > 11) {
            $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
            $('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
            $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
        } else {
            var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());
            $('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');
            $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
        }
    }
</script>
</body>
</html>

大站就是有大站的风范，很多效果还都是他们先开始制作使用，小伙伴们可以经常去逛逛，很容易发现些好东西

您可能感兴趣的文章: