Question

我目前正在创建一个可垂直滚动的网站，并在顶部有一个导航栏，如图所示。当用户不在最顶层时，导航栏变大，这实现为：

if (window.scrollY == nav.offsetTop) {
    document.querySelector('.nav').classList.add("largerNavbar");
} else {
    document.querySelector('.nav').classList.remove("largerNavbar");
}

在javascript中，它只是添加了一个新的类，它具有较大的高度到导航栏。但问题是，它隐藏了第二行的内容。第二排的风格如下：

div#firstRow {
    padding: 10px;
    width: 100%;
    //position: relative;
    margin:0 auto;
    line-height: 1.4em;
    background-color: green;
}

我评论了位置：相对因为第二行将隐藏导航栏。

这里有什么问题？

编辑：

$ font-stack：Helvetica，sans-serif; $ primary-color：＃333;

body {

    height: 100%;
    font: 100% $font-stack;
    color: $primary-color;
    margin: 0px;

    .largerNavbar .nav{
        font-size: 20px;
        height: 90px;
    }

    .largerNavbar #firstRow {
        font-size: 20px;
        height: 90px;
    }

    .onSection {

        background-color: gray;

    }

    .nav{

        color: white;

        //vertical center
        display: flex;
        align-items: center;
        font-size: 12px;
        height: 70px;
        overflow: hidden;
        background-color: #333;
        transition:all 1s;
        -webkit-transition:all 1s; 

        .menus {

            position: absolute;
            right: 0px;
            padding: 10px;
        }

        .logo {

            position: absolute;
            left: 0px;
            padding: 10px;          

        }

    }

    .stationary {
        position: fixed;
        top: 0;
        width: 100%;
    }

    .nav a {
        color: white;
        float: left;
        display: block;
        text-align: center;
        padding: 14px;
        text-decoration: none;
    }

    div#firstRow {
        padding: 10px;
        width: 100%;
        //position: relative;
        margin:0 auto;
        line-height: 1.4em;
        background-color: green;
  }

    div#secondRow {
        padding: 10px;
        //position: relative;
        margin:0 auto;
        line-height: 1.4em;
        background-color: blue;
  }

    div#thirdRow {
        padding: 10px;
        //position: relative;
        margin:0 auto;
        line-height: 1.4em;
        background-color: yellow;
    }

      div#lastRow {
        height: 100px;
        background-color: black;
    }

}

    <div class="logo">
        HOME
    </div>

    <div class="menus">
            <span><a href="#about">About</a></span>
            <span><a href="#archive">Archive</a></span>
            <span><a href="#projects">Projects</a></span>
            <span><a href="#contact">Contact</a></span>
    </div>
</div>   

<div id="firstRow">
    <a id="about" class="smooth"></a>

</div> 


<div id="secondRow">
    <a id="history"></a>

</div> 

<div id="thirdRow">
    <a id="contact"></a>

</div> 

<div id="fourthRow">
    <a id="contact"></a>

</div> 

<div id="lastRow">
    <a id="footer"></a>
    footer goes here
</div> 
<script src="bundle.js" type="text/javascript"></script>

Answer 1

我猜你给了导航栏stat_count或df %>% select(-Area) %>% gather() %>% filter(value == 'Yes') %>% ggplot(aes(key, ..count..)) + geom_bar()定位。

如果是这样的话，我会尝试将absolute类添加到一个元素，该元素是导航栏和绿色容器的父元素，然后有一些CSS选择器可以改变它们导航栏的fixed属性和绿色容器的largerNavbar属性同时存在。

这样的事情：

height

添加一些CSS过渡，它应该看起来很棒。祝你好运！

调整大小的导航栏会隐藏网站内容

1 个答案: