无法将图像标题放在导航栏上方，滚动过去时会粘住

我正在尝试创建一个网站，其中有一个标题图像，导航栏在其下方。虽然我在使用 jquery 代码的地方遇到了问题，但我的标题图像仍然显示在导航栏下方。我在我的样式中包含指向 jquery 脚本的链接。这是我所拥有的：

$(function() {
  // Check the initial Poistion of the Sticky Header
  var stickyHeaderTop = $('#stickyheader').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > stickyHeaderTop) {
      $('#stickyheader').css({
        position: 'fixed',
        top: '0px'
      });
      $('#stickyalias').css('display', 'block');
    } else {
      $('#stickyheader').css({
        position: 'static',
        top: '0px'
      });
      $('#stickyalias').css('display', 'none');
    }
  });
});

#stickyheader {
  width: 100%;
}
#stickyalias {
  display: none;
  height: 10px;
}
#unstickyheader {
  margin-bottom: 20px;
}
#othercontent {
  margin-top: 20px;
}
h1 {
  padding: 60px 0px 30px 45%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
p {
  font-size: 50px;
  background: darkred;
}

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="unstickyheader">
    <img src="ingredient-banner.jpg">
  </div>
  <div id="stickyheader">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
  <div id="stickyalias"></div>
  <div id="othercontent">
    <h1>Sinful Cuisine</h1>
  </div>
</body>
</html>

将图像放在li中，并为其提供类日志并使用此 css：

.logo {
  float: right;
  margin-right: 20px
}
.logo img {
  height: 40px
}

如下例所示：

$(function() {
  // Check the initial Poistion of the Sticky Header
  var stickyHeaderTop = $('#stickyheader').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > stickyHeaderTop) {
      $('#stickyheader').css({
        position: 'fixed',
        top: '0px'
      });
      $('#stickyalias').css('display', 'block');
    } else {
      $('#stickyheader').css({
        position: 'static',
        top: '0px'
      });
      $('#stickyalias').css('display', 'none');
    }
  });
});

#stickyheader {
  width: 100%;
}
#stickyalias {
  display: none;
  height: 10px;
}
#unstickyheader {
  margin-bottom: 20px;
}
.logo {
  float: right;
  margin-right: 20px
}
.logo img {
  height: 40px
}
#othercontent {
  margin-top: 20px;
}
h1 {
  padding: 60px 0px 30px 45%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
p {
  font-size: 50px;
  background: darkred;
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="stickyheader">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li class="logo">
        <img src="https://vignette.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645">
      </li>
    </ul>
  </div>
  <div id="stickyalias"></div>
  <div id="othercontent">
    <h1>Sinful Cuisine</h1>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：