Как устранить разрыв на липком режиме? - PullRequest
Новая
       8

Как устранить разрыв на липком режиме?

0 голосов
/ 05 ноября 2018

Когда я развертываю это выпадающее меню в режиме закрепления (то есть, когда я прокручиваю страницу содержимого), в подменю «книги» появляется разрыв между «прочитано» и «ссылка 1 / ссылка 2 / ссылка 3», которого нет в подменю «видео»> «смотреть / скачать». Разрыв отсутствует, когда панель навигации находится на верхней странице.

Как я могу это исправить? 

window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
}

h2 {
  font-family: Times New Roman, serif;
  font-size: 17px;
  font-style: italic;
  color: black;
  background-color: white padding: 30px;
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: red;
  color: white;
}

#navbar .search-container {
  float: right;
}

#navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

#navbar .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

#navbar .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  #navbar .search-container {
    float: none;
  }
  #navbar a,
  .navbar input[type=text],
  .navbar .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  #navbar input[type=text] {
    border: 1px solid #ccc;
  }
}

.content {
  padding: 16px;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: visible !important;
}

.sticky+.content {
  padding-top: 60px;
}

.sticky .dropdown-content {
  top: 48px;
}

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

.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: #ddd;
  color: #f2f2f2;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: #f2f2f2;
  text-decoration: none;
}

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

.subnav:hover .subnav-content {
  display: block;
}

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

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical 
align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile 
phones */
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, 
initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div id="navbar">
    <a class="active" href="#home">Home</a>
    <div class="subnav">
      <button class="subnavbtn">Books <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <div class="subnav">
          <div class="dropdown">
            <button class="dropbtn">Read 
<i class="fa fa-caret-down"></i>
</button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
          <a href="#team">PDF 1</a>
          <a href="#careers">PDF 2</a>
        </div>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Video <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <a href="#bring">Watch</a>
        <a href="#deliver">Download</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i> 
</button>
      </form>
    </div>
  </div>
  <div style="padding:0 16px">
    <h3>Subnav/dropdown menu inside a Navigation Bar
    </h3>
    <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
  </div>
  </div>
  </div>
  <div class="content">
  </div>
  </div>
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  </div>
  /
</body>

</html>

1 Ответ

0 голосов
/ 05 ноября 2018

Вы установили .dropdown-content равным 48px от вершины содержащего его блока, когда он является дочерним элементом элемента с классом .sticky, это создает разрыв в 2px, поскольку он содержит элемент (.subnav-content). только 46px в высоту. Вы можете исправить это, установив .dropdown-content на 100% от верхней части содержащего его блока вместо 48px: 

.sticky .dropdown-content {
  top: 100%;
}


window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
}

h2 {
  font-family: Times New Roman, serif;
  font-size: 17px;
  font-style: italic;
  color: black;
  background-color: white padding: 30px;
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: red;
  color: white;
}

#navbar .search-container {
  float: right;
}

#navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

#navbar .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

#navbar .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  #navbar .search-container {
    float: none;
  }
  #navbar a,
  .navbar input[type=text],
  .navbar .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  #navbar input[type=text] {
    border: 1px solid #ccc;
  }
}

.content {
  padding: 16px;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: visible !important;
}

.sticky+.content {
  padding-top: 60px;
}

.sticky .dropdown-content {
  top: 100%;
}

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

.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: #ddd;
  color: #f2f2f2;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: #f2f2f2;
  text-decoration: none;
}

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

.subnav:hover .subnav-content {
  display: block;
}

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

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical 
align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile 
phones */
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, 
initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div id="navbar">
    <a class="active" href="#home">Home</a>
    <div class="subnav">
      <button class="subnavbtn">Books <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <div class="subnav">
          <div class="dropdown">
            <button class="dropbtn">Read 
<i class="fa fa-caret-down"></i>
</button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
          <a href="#team">PDF 1</a>
          <a href="#careers">PDF 2</a>
        </div>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Video <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <a href="#bring">Watch</a>
        <a href="#deliver">Download</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i> 
</button>
      </form>
    </div>
  </div>
  <div style="padding:0 16px">
    <h3>Subnav/dropdown menu inside a Navigation Bar
    </h3>
    <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
  </div>
  </div>
  </div>
  <div class="content">
  </div>
  </div>
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  </div>
  /
</body>

</html>
...