个人博客—一键分享侧边栏

个人博客—一键分享侧边栏

• 鼠标滑过分享侧边栏，则分享列表滑出；

滑出

• 鼠标滑出分享侧边栏，则分享列表滑回起始位置。

滑回起始位置

html部分

  
分享到
  

    
一键分享
    
新浪微博
    
人人网
    
百度相册
    
腾讯朋友
    
豆瓣网
    
百度新首页
    
和讯微博
    
QQ 空间
    
百度搜藏
    
腾讯微博
    
开心网
    
百度贴吧
    
搜狐微博
    
QQ 好友
    
更多...
  
  
百度分享

js部分

    //分享初始化位置,设置为当前视口高度和share css高度之和的一半再加上滚动条的滚动高度
    $('#share').css('top', $(window).scrollTop() + ($(window).innerHeight() - parseInt($('#share').first().css('height'))) / 2 + 'px');
    // 当页面发生滚动时，每隔0.2秒重置一下分享的位置
    $(window).on('scroll', function () {
        setTimeout(function () {
            $('#share').css('top', $(window).scrollTop() + ($(window).innerHeight() - parseInt($('#share').first().css('height'))) / 2 + 'px');
        }, 200);
    });
    //分享收缩效果
    $('#share').hover(function () {
        $(this).animate({
            left:0
        },200);
    }, function () {
        $(this).stop().animate({
            left:-211
        },200);
    });

代码在Github：个人博客