zoukankan      html  css  js  c++  java
  • jquery实现分享到侧边栏原理

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

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

    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);
        }
        );
    2018年,12月开始,我要认真写博客啦
  • 相关阅读:
    思念
    空白
    curl json string with variable All In One
    virtual scroll list All In One
    corejs & RegExp error All In One
    socket.io All In One
    vue camelCase vs PascalCase vs kebabcase All In One
    element ui 表单校验,非必填字段校验 All In One
    github 定时任务 UTC 时间不准确 bug All In One
    input range & color picker All In One
  • 原文地址:https://www.cnblogs.com/lw1995/p/6659811.html
Copyright © 2011-2022 走看看