允许滚动固定父元素的绝对子元素

Question

我有一个header元素是固定的。在元素内，有一个下拉列表nav，位于标题下的绝对位置。我实现了下拉功能以使其显示，但有可能在nav保持固定时滚动header吗？我发现nav变得相当大，太大而不能滚动。

我目前的进展：

＆＃13;

＆＃13;

window.onload = function() {
    var menuBtn = document.getElementById("menu-icon"),
        navbar = document.getElementById("navbar"),
        header = document.getElementById("header");
    
    menuBtn.addEventListener('click', toggleMenu);
 
    function toggleMenu(){
        menuBtn.classList.toggle("active");
        navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
    }
}

＆＃13;

header {
    background:#ddd;
    position: fixed;
    height: 45px;
    top: 0;
    width: 100vw;
    z-index: 500;
}

nav{
    overflow: auto;
    background: #fff;
    position: absolute;
    left: 0;
    top: 45px;
    transition: all 0.3s;
    max-height: 0;
    overflow: hidden;
}

#menu-icon {
    display: block;
    float: right;
    height: 100%;
    width: 22px;
    margin-right: 7%;
    background: black;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#menu-icon.active{
    background: blue;
}

.item{
    display: inline-flex;
    width: 86vw;
    padding: 8px 0;
    margin: 0 7%;
    border-top: 1px solid #58595b;
}

.item a{
    color: #58595b;
    display: inline-block;
    width: 85%;
    transition: all 0.3s;
}

＆＃13;

<header id="header">
    <div id="menu-icon"></div>
    <nav id="navbar">
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
    </nav>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加此CSS

即可

var w= new ActiveXObject("Word.Application");

w.Visible = true;

obj= w.documents.open(doc)

Answer 2

您可以添加此css文件

#navbar{
    position: relative;
    overflow-y: scroll;
    height:200px;
}

window.onload = function() {
    var menuBtn = document.getElementById("menu-icon"),
        navbar = document.getElementById("navbar"),
        header = document.getElementById("header");
    
    menuBtn.addEventListener('click', toggleMenu);
 
    function toggleMenu(){
        menuBtn.classList.toggle("active");
        navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
    }
}

header {
    background:#ddd;
    position: fixed;
    height: 45px;
    top: 0;
    width: 100vw;
    z-index: 500;
}
#navbar{
    position: relative;
    overflow-y: scroll;
    height:200px;
}
nav{
    overflow: auto;
    background: #fff;
    position: absolute;
    left: 0;
    top: 45px;
    transition: all 0.3s;
    max-height: 0;
    overflow: hidden;
}

#menu-icon {
    display: block;
    float: right;
    height: 100%;
    width: 22px;
    margin-right: 7%;
    background: black;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#menu-icon.active{
    background: blue;
}

.item{
    display: inline-flex;
    width: 86vw;
    padding: 8px 0;
    margin: 0 7%;
    border-top: 1px solid #58595b;
}

.item a{
    color: #58595b;
    display: inline-block;
    width: 85%;
    transition: all 0.3s;
}

<header id="header">
    <div id="menu-icon"></div>
    <nav id="navbar">
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
    </nav>
</header>