Question

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

＆＃13;

$(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');
    }
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将图像放入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>

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

1 个答案: