微博那种屏幕靠上方名片卡就在下浮出,屏幕靠下方名片卡就在上浮出的效果怎么做啊?

解决方案 »

  1.   

    判断下滚动位置,比如滚动到200px了就显示,小于200px隐藏<div style="height:1000px"></div>
    <div id="dv" style="position:absolute;border:solid 1px black;background:#eee;">卡片内容</div>
    <script>
        var MaxTop = 200;
        window.onscroll = function () {
            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
            , clientHeight = Math.min(document.documentElement.clientHeight, document.body.clientHeight)
            , dv;
            dv = document.getElementById('dv');
            if (!dv) return;
            if (scrollTop >= MaxTop) {
                dv.style.display = 'block';
                dv.style.left = '0px';
                dv.style.top = scrollTop + clientHeight - dv.offsetHeight+'px'
            }
            else dv.style.display = 'none';
        }
    </script>