Абсолютный позиционированный div скрыт, когда закреплена липкая навигационная панель - PullRequest
Новая
       29

Абсолютный позиционированный div скрыт, когда закреплена липкая навигационная панель

0 голосов
/ 13 октября 2018

Когда мой navbar касается верхней части экрана, ссылки в раскрывающемся меню исчезают.

Я использовал w3schools учебники и примеры для создания моей страницы.Особенно:

Это пример моегопроблема: 

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

.drop .dropbutton {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#navbar a:hover,
.drop:hover .dropbutton {
  background-color: #25aa25;
}

.links {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.links a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.links a:hover {
  background-color: #ddd;
}

.drop:hover .links {
  display: block;
}

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

.sticky+article {
  padding-top: 60px;
}
<body>
  <header>
    <h1>
      Example for StackOverflow
    </h1>
  </header>
  <nav id="navi">
    <div class="drop">
      <button class="dropbutton">
                Button - dropdown
            </button>
      <div class="links">
        <a href="">Random link 1</a>
        <a href="">Random link 2</a>
        <a href="">Random link 3</a>
      </div>
    </div>
  </nav>
  <article>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
  </article>
</body>

1 Ответ

0 голосов
/ 13 октября 2018

Правильный вопрос будет: " Почему мы можем видеть выпадающий список, когда navbar не находится в верхней части экрана? ".

* navbar имеет CSSсвойство overflow установлено в hidden, предотвращающее отображение контента за его пределами.Но div, содержащий раскрывающиеся ссылки (.links), имеет position, установленный на absolute, поэтому он находится вне потока документов.

С MDN :

absolute

Элемент удален из обычного потока документов, инет места для элемента в макете страницы.Он расположен относительно своего ближайшего предка, если таковой имеется;в противном случае он размещается относительно исходного содержащего блока.

Поскольку .links не имеет какого-либо позиционного предка, его положение относительно исходного содержащего блока.

Но когда navbar касается верхней части экрана,.sticky класс применяется.Его основная функция состоит в том, чтобы установить для свойства position CSS значение fixed (вне потока документов и расположено относительно исходного содержащего блока, установленного в области просмотра).

Когда применяется .sticky, .links позиционируется относительно navbar, поэтому на него воздействуют overflow: hidden.

Поскольку вам не нужно скрывать его, когда применяется .sticky, установите overflow свойство от navbar до visible, когда это происходит.

В CSS атрибут id имеет приоритет над class, поэтому у вас есть два варианта.Обновите класс .sticky: 

.sticky {
  ...
  overflow: visible !important;
}

Это рано или поздно приведет к важному кошмару .Или, что еще лучше, создайте новое правило, содержащее оба селектора, чтобы придать ему более высокий приоритет: 

#navi.sticky {
  overflow: visible;
}


window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
#navi.sticky {
  overflow: visible;
} 

#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

.drop .dropbutton {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#navbar a:hover,
.drop:hover .dropbutton {
  background-color: #25aa25;
}

.links {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.links a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.links a:hover {
  background-color: #ddd;
}

.drop:hover .links {
  display: block;
}

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

.sticky+article {
  padding-top: 60px;
}
<body>
  <header>
    <h1>
      Example for StackOverflow
    </h1>
  </header>
  <nav id="navi">
    <div class="drop">
      <button class="dropbutton">
                Button - dropdown
            </button>
      <div class="links">
        <a href="">Random link 1</a>
        <a href="">Random link 2</a>
        <a href="">Random link 3</a>
      </div>
    </div>
  </nav>
  <article>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
  </article>
</body>
...