Заставить ребенка появляться только тогда, когда появляется родитель - PullRequest
Новая
       0

Заставить ребенка появляться только тогда, когда появляется родитель

0 голосов
/ 13 мая 2018

У меня есть родительский 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;  
}

1 Ответ

0 голосов
/ 13 мая 2018

Вы должны использовать 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>
...