js+css实现简单侧边栏

在web端,侧边栏经常会出现,代码展示如何实现侧边栏的定位
实现侧边栏定位最简单的就是使用固定定位,但是固定定位在ie6中不支持
在ie6中只能使用代码中展示的js去计算定位
在其他浏览器中,可以使用代码中样式注释掉的方式进行定位,很方便

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                right: 0;
                /*position: fixed; 
                 * top:50%;
                 * margin-top:-50px;
                 * 使用固定定位可以实现侧边栏定位,完全不需要js;但是在ie6中不支持固定定位*/
                
            }
        </style>
        <script>
            //window.onresize  处理在窗口放大缩小时,侧边栏的位置
            //window.onload  处理在窗口加载时,侧边栏的位置
            //window.onscroll  处理在窗口滚动时,侧边栏的位置
        window.onresize = window.onload =  window.onscroll = function(){
            var oDiv = document.getElementById("div1");
            //在不同的浏览器中一下document.documentElement.scrollTop,document.body.scrollTop  这两个值总会有一个恒为0
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            var t = (document.documentElement.clientHeight - oDiv.offsetHeight)/2;
            oDiv.style.top = scrollTop + t + "px"; 
        }
    </script>
    </head>
    
    <body style="height: 2000px;">
        <div id="div1"></div>
    </body>
    
</html>

以上代码实现,不管是放大缩小窗口还是滚动窗口都能实现侧边栏的定位

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容