css 通过fixed定位制作导航条的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

css 通过fixed定位制作导航条的问题

<html>
<head>
    <style>
       #blog_header{
        width: 100%;
        height: 130px;
        background: #993399;
        position: fixed;
    }
    #nav_ul,#nav_ul li{
        height: 30px;
        display: inline;
        line-height: 30px;
    }
    </style>
</head>
<body>
    <div id="blog_header">
                <ul id="nav_ul">
                    <li>news</li>
                    <li>technology</li>
                    <li>forum</li>
                    <li>about me</li>
                </ul>
    </div>

    <div id="main_wrapper">
        content
    </div>

如让一段代码,这样导航条是会永远停留在网页最上端,但是目前的问题是fixed定位后脱离文档流了,导航条不再占位,导致下面#main_wrapper的起始位置和#blog_header一样了,请问我如何让#blog_header占位?

网上查到部分资料说放一个空div,但是感觉这样不太合适

展开
收起
a123456678 2016-03-26 14:15:52 2124 0
1 条回答
写回答
取消 提交回答
  • a123456678
    #nav {
        position: sticky;
        top: 0;
    }
    最完美的解決方案。
    可惜目前瀏覽器支持還不太好。
    
    所以附上一個 polyfill:
    
    var Sticky = function() {
        var s = [], 
            support = (function testSupport() {
            var div = document.createElement("div");
            var st = ["sticky", "-webkit-sticky"];
    
            return st.some(function(x) {
                div.style.position = x;
    
                return div.style.position === x;
            });
        }());
    
        function Sticky(o) {
            var self = this;
    
            s.push(self);
    
            self[0] = o;
    
            var placeholder = document.createElement("div");
            self.placeholder = placeholder;
            placeholder.classList.add("placeholder");
    
            self.fixed = false;
    
            self.posit = posit;
    
            function posit() {
                var rect;
    
                if (self.fixed) {
                    rect = placeholder.getBoundingClientRect();
    
                    self.staticTop = rect.top + window.pageYOffset;
                } else {
                    rect = o.getBoundingClientRect();
    
                    self.staticTop = rect.top + window.pageYOffset;
                }
            }
    
            posit();
        }
    
        Sticky.prototype.stick = function() {
            if (support)
                return;
    
            var o = this[0], 
                top = this.staticTop;
    
            var placeholder = this.placeholder, fixed = this.fixed;
    
            console.log(top);
    
            if (top > window.pageYOffset && fixed) {
                placeholder.parentNode.removeChild(placeholder);
    
                o.classList.remove("sticky");
    
                fixed = false;
            } else if (top <= window.pageYOffset && !fixed) {
                o.parentNode.insertBefore(placeholder, o);
    
                o.classList.add("sticky");
    
                fixed = true;
            }
    
            this.fixed = fixed;
        };
    
        if (!support) {
            window.addEventListener("scroll", function() {
                s.forEach(function(x) { x.stick(); });
            });
    
            window.addEventListener("resize", function() {
                s.forEach(function(x) { x.posit(); });
                s.forEach(function(x) { x.stick(); });
            });
        } else {
            console.log("support");
        }
        return Sticky;
    }();
    使用方法:new Sticky(document.querySelector("#nav"));
    2019-07-17 19:16:09
    赞同 展开评论 打赏
问答分类:
问答标签:
相关产品:
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载