如何消除粘滞模式上的间隙？

时间：2018-11-05 02:09:09

标签： html css drop-down-menu sticky

当我以粘性模式部署此下拉菜单时（即，当我向下滚动内容页面时），“书”子菜单中的“读取”和“链接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 :(得分：0)

如果.dropdown-content是元素.sticky的子元素，则将.subnav-content设置为从其包含块的顶部起48px，这会产生2px的间隙，因为它包含元素（{ {1}}的高度仅为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>

相关问题
最新问题