CSS-переход не работает для высоты: 0 (но для других высот) - PullRequest
Новая
       7

CSS-переход не работает для высоты: 0 (но для других высот)

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

Я бы хотел, чтобы переход работал, когда заголовок также скрыт.Но это исчезает сразу.Пожалуйста, посмотрите на код и прокрутите вниз, чтобы увидеть эффект: 

function getScrollTop() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

function showHeaderHidden() {
    document.getElementById('header').classList.add('hidden');
    document.getElementById('header').classList.remove('fixed');
}

function showHeaderFixed() {
    document.getElementById('header').classList.add('fixed');
    document.getElementById('header').classList.remove('hidden');
}

function showHeaderFull() {
    document.getElementById('header').classList.remove('fixed');
    document.getElementById('header').classList.remove('hidden'); 
}

var lastScrollTop = 0;

function atPageTop(scroll) {
    return scroll < 1;
}

function scrollingDown(scroll) {
    return scroll > lastScrollTop
}

function onWindowScroll() {
    var scrollTop = getScrollTop();
    
    if (scrollingDown(scrollTop)) {
        if (scrollTop > 300) {
            showHeaderHidden();
        } else {
            showHeaderFixed();
        }
    } else {
        if (atPageTop(scrollTop)) {
            showHeaderFull();
        } else {
            showHeaderFixed();
        }
    }
    
    lastScrollTop = scrollTop;
}

lastScrollTop = getScrollTop();

window.onscroll = function () {
  onWindowScroll();
};
body {
  height: 2000px;
  margin: 0px;
}

header {
  height: 120px;
  background: red;
  
  transition: .5s;
}

header.fixed {
  position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
  background: green;
  
  transition: .5s;
}

header.hidden {
  height: 0px;
}
<header id="header">
  
</header>

Как вы можете видеть, я указал переход, но по какой-то причине он игнорируется: 

header.hidden {
  height: 0px;

  transition: .5s;
}

Надеюсь, кто-то сможетпомогите мне!

Заранее спасибо:)

1 Ответ

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

Проблема в том, что вы удаляете класс fixed на втором шаге, который создает проблему, когда ваш элемент вернется в исходное положение.Вы должны сохранить этот класс с hidden: 

function getScrollTop() {
  return window.pageYOffset || document.documentElement.scrollTop;
}

function showHeaderHidden() {
  document.getElementById('header').classList.add('hidden');
  /* document.getElementById('header').classList.remove('fixed'); remove this*/
}

function showHeaderFixed() {
  document.getElementById('header').classList.add('fixed');
  document.getElementById('header').classList.remove('hidden');
}

function showHeaderFull() {
  document.getElementById('header').classList.remove('fixed');
  document.getElementById('header').classList.remove('hidden');
}

var lastScrollTop = 0;

function atPageTop(scroll) {
  return scroll < 1;
}

function scrollingDown(scroll) {
  return scroll > lastScrollTop
}

function onWindowScroll() {
  var scrollTop = getScrollTop();

  if (scrollingDown(scrollTop)) {
    if (scrollTop > 300) {
      showHeaderHidden();
    } else {
      showHeaderFixed();
    }
  } else {
    if (atPageTop(scrollTop)) {
      showHeaderFull();
    } else {
      showHeaderFixed();
    }
  }

  lastScrollTop = scrollTop;
}

lastScrollTop = getScrollTop();

window.onscroll = function() {
  onWindowScroll();
};
body {
  height: 2000px;
  margin: 0px;
}

header {
  height: 120px;
  background: red;
  transition: .5s;
}

header.fixed {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: green;
  /*transition: .5s; can be removed */
}

header.hidden {
  height: 0px;
}
<header id="header">

</header>
...