Question

我有一个在页面加载时隐藏的父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;  
}

Answer 1

您应该使用display:none隐藏元素及其所有子元素。如果由于某种原因需要顶级元素可见，但隐藏了其子级，则可以在子级上使用display: none。请使用直接后代css属性>

查看以下示例

＆＃13;

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

＆＃13;

.nav {
  background-color: teal;
  width: 100px;
  height: 100px;
}

.nav > * {
  display: none;
}

.nav.appear > * {
  display: block;
}

＆＃13;

<div class="nav">
  <a href="">Home</a>
  <a href="">Login</a>
</div>

<button id="toggle">toggle "appear" classname</button>

＆＃13;

只有在父级显示时才会显示子项

1 个答案: