基础知识：页面div始终浮在浏览器顶部

最新推荐文章于 2023-06-16 10:37:52 发布

weixin_30652897

最新推荐文章于 2023-06-16 10:37:52 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/FallenAngle/p/7126415.html

版权

页面div始终浮在浏览器顶部

<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="/js/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0;}
        .ndiv{ width:200px; height:400px; border:1px solid #ccc;background: #f1f1f1;}
        .fix-div{ position:fixed; top:0px;}
    </style>
</head>
<body>
<div style="height: 700px;"></div>
<div id="mydiv" class="ndiv" >浮动</div>
<div style="height:2700px;"></div>


<script type="text/javascript">
    $.fn.fixedDiv = function(actCls){
        var pos = 0,
            that = $(this),
            topVal;

        if(that.length > 0){
            topVal = that.offset().top;
        }

        function fix(){
            pos = $(document).scrollTop();

            if (pos > topVal) {
                that.addClass(actCls);
                if (!window.XMLHttpRequest) {
                    that.css({
                        position: 'absolute',
                        top     : pos
                    });
                }
            } else {
                that.removeClass(actCls);
                if (!window.XMLHttpRequest) {
                    that.css({
                        position: 'static',
                        top     : 'auto'
                    });
                }

            }
        }
        fix();

        $(window).scroll(fix);
    }

    $('#mydiv').fixedDiv('fix-div');
</script>
</body>
</html>

转载于:https://www.cnblogs.com/FallenAngle/p/7126415.html

weixin_30652897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础知识：页面div始终浮在浏览器顶部

页面div始终浮在浏览器顶部<html><head> <meta charset="utf-8"/> <title>test</title> <script type="text/javascript" src="/js/jquery/1.8.3/jquery.min.js"><...
复制链接

扫一扫