仅当父母出现时才让孩子出现答案

【问题标题】：Make child appear only when parent appears仅当父母出现时才让孩子出现
【发布时间】：2018-05-12 22:29:46
【问题描述】：

我有一个在页面加载时隐藏的父 div nav.nav-bar。当页面滚动时，我添加类 .appear 以获取 nav.nav-bar.appear 以便出现导航栏。但是我的html/pug 目前的结构是这样的：

    body
    nav.nav-bar
        <a href="">Home</a>
        <a href="">Login</a>
        <a href="">Search</a>

这意味着子 Home Login Search 在页面加载时显示。如何更改子项的属性以使它们仅在滚动时出现？除了添加一个使它们出现在滚动条上的js 函数之外？

我的代码：

home.pug

doctype html
html
    head
        title Spice

        link(rel="icon" type="" href="../assets/images/tricycle-6.png")
        link(rel="stylesheet" type="text/css" href="../assets/css/spice.css")
        script(type='text/javascript', src='../assets/js/spice.js')

    body
        nav.nav-bar
            <h href="">home</a>

spice.js：

/**
    On scroll effects
*/ 
window.onscroll = function() {

    ping_scroll();
    reveal_navBar();

};


/**
    On scroll callbacks
*/
function ping_scroll(){
    var url = window.location.href
    // console.log('url: ', url);
}

function reveal_navBar() {

    // Get the header
    var header = document.getElementsByClassName('nav-bar')

    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

    if (scrollTop >= 100){

        console.log("drop tab")
        header[0].classList.add('appear')
        // header.slideDown(200);

    } else {

        console.log("hide tab")
        header[0].classList.remove('appear')
    }

}

spice.css：

/**
  body container
*/

body {
  margin: 0;
}



/**
  navigation bar
*/
.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
  height: 7vw;
  background-color: rgba(250, 250, 250, 0.5);


  /**
    transition properties
  */
  /*-webkit-transition: all 1.25s ease;*/
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;  

}

@media screen and (max-width: 768px) {
  .nav-bar {
    min-height: 73px;
  }
}


.nav-bar.appear{
  position: fixed;
  background-color: rgba(159, 128, 255, 0.9);
  z-index: 20;

  /**
    transition properties
  */
  -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
       -o-transition: all .25s ease;
          transition: all .25s ease;  
}

【问题讨论】：

我们需要更多代码，隐藏 nav.nav-bar 的代码是什么？

标签： javascript html css pug

【解决方案1】：

您应该使用display:none 来隐藏一个元素及其所有子元素。如果出于某种原因您需要顶级元素可见，但其子元素隐藏，则可以在子元素上使用display: none。请参阅下面的示例，使用直接后代 css 属性 >

document.getElementById('toggle').addEventListener('click', () => {
  const nav = document.querySelector('.nav');
  if (nav.className === 'nav') {
    nav.className = 'nav appear';
  } else {
    nav.className = 'nav';
  }
});

.nav {
  background-color: teal;
  width: 100px;
  height: 100px;
}

.nav > * {
  display: none;
}

.nav.appear > * {
  display: block;
}

<div class="nav">
  <a href="">Home</a>
  <a href="">Login</a>
</div>

<button id="toggle">toggle "appear" classname</button>

【讨论】：