JQuery实现悬浮层

JQuery实现悬浮层

1、HTML代码

<div id="fudong" style="border:1px solid #454545; width:50px; height:100px; position: absolute; right: 20px; top: 100px;">
    右侧悬浮层
</div>
           

2、JS脚本

$(function() {
    var timer, scrollTop, sideDiv = $('#fudong').appendTo('body');
    $(window).scroll(function() {
        timer && clearTimeout(timer);
        scrollTop = $(this).scrollTop();
        timer = setTimeout(function() {
            sideDiv.animate({
                top: scrollTop + 100 + 'px'
            }, 600);
        }, 200);
    });
});