js实现div吸顶效果

Posted 2020-10-11 dongruiha

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var TIMER;//定义全局变量
    $(window).scroll( function() {
        clearTimeout(TIMER);//必须要有这句
        if( $(document).scrollTop() > 0 ){
            TIMER = setTimeout(function(){
                $("#aaa").addClass("abc");console.log($(document).scrollTop());
            },100);
        }else{
            TIMER = setTimeout(function(){
                $("#aaa").removeClass("abc");
            },100);
        }
    });
});
</script>
<style type="text/css">
html,body{margin:0;padding:0;}
#aaa{width:100%;height:40px;line-height:40px;background:#3399cc;}
.abc{position:fixed;left:0;right:0;top:0;}
</style>
<div id="aaa">aaaaaaa</div>