jquery实现分享到侧边栏原理

Posted 2020-09-07 晓晓de烟火

几乎每一个网站，都有一个分享到侧边栏的功能，

我写的这个是固定在网页窗口的左侧，

html:

<!--------------分享到侧边栏---------------------->
<div id="share">
    <span>分享</span>
</div>

css:

/*******************************分享到侧边栏**************************************/
#share{
    position: absolute;
    left:-100px;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 2;
}
#share span{
    position: absolute;
    left:100px;
    top:30px;
    width:20px;
    height: 37px;
    padding-top:5px;
    display: block;
    background-color: purple;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
}

那么问题来了,怎么固定在网页的中部？

首先获取到窗口的滚动条的到文档顶部的距离，再加上可视区域减去分享到侧边栏的高度除2，就是需要分享到侧边栏的高度。

剩下的就是鼠标移入，侧边栏向右移动。移出缩进。

 

jquery:

$(function(){
    $(window).scroll(function(){
        var scrolltop=($(window).height()-100)/2;
        var top=$(document).scrollTop()+scrolltop;
        $("#share").css("marginTop",top+"px"); /************把分享栏固定在窗口左侧***********/

})
    /************移入移出侧边栏***********/
    $("#share").hover(function(){
        $(this).animate({left: 0 },300);
    },
    function(){
        $(this).animate({left:-100},300);
    }
    );