Question

我现在正艰难地尝试制作我的粘性导航栏。我前一阵子做了，但是我添加了9个带有一些js效果的文章卡片，然后在我滚动时，卡片下面的导航栏是alwyas。因此，后来当我在某个地方搞砸时，我正尝试修复它，而现在我找不到我的错误了。附言我是编程新手，所以我没有太多经验。

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementsById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

	  /* NAVIGATION */
nav {
	width: 100%;
	background: #9E0B0D;
	overflow: hidden;
}
nav ul {
	list-style: none;
	text-align: center;
}
nav ul li {
	display: inline-block;
	margin-left: 25px;
	margin-right: 25px;
	height: 40px;
}
nav ul li a {
	display: block;
	padding-right: 15px;
	padding-left: 15px;
	text-decoration: none;
	color: #aaa;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}

  #navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding-top: 14px;
    padding-right: 14px;
    padding-left: 14px;
    text-decoration: none;
    padding-bottom: 14px;
  }

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
/* SHIFT */
#navbar ul li a {
  position:relative;
  z-index: 1;
}
#navbar ul li a:hover {
  color: #91640F;
}
#navbar ul li a:after {
  display: block; 
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #F1C40F;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
#navbar ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

<nav id="navbar">
  <ul>
    <li><a href="######.html">Начало</a></li>
    <li><a href="######.html">Федерацията</a></li>
    <li><a href="Clubs.html">Клубове</a></li>
    <li><a href="######.html">Календар</a></li>
    <li><a href="######.html">Галерия</a></li>
    <li><a href="######.html">Новини</a></li>
  </ul>
</nav>

Answer 1

您正在使用document.getElementsById("navbar")的情况下使用document.getElementById("navbar")。

Answer 2

我在这里有一个导航栏：

<!DOCTYPE html>
<html>

<head>
  <style>
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      position: -webkit-sticky;
      /* Safari */
      position: sticky;
      top: 0;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #111;
    }
    
    .active {
      background-color: #4CAF50;
    }
  </style>
</head>

<body>

  <div class="header">
    <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <ul>
    <li><a class="active" href="#home">Начало</a></li>
    <li><a href="#news">Федерацията</a></li>
    <li><a href="#contact">Клубове</a></li>
    <li><a href="#contact">Календар</a></li>
    <li><a href="#contact">Галерия</a></li>
    <li><a href="#contact">Новини</a></li>
  </ul>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.</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>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>

</body>

</html>

无法制作粘性导航栏

2 个答案: