Question

我目前正在尝试设计一个网站，点击导航按钮，页面的一部分滚动，而顶部标题＆amp;导航栏保持原位。我有滚动工作，顶部保持原位..但主要内容（滚动的部分）目前位于标题＆amp;导航栏。我的代码就是：

＆＃13;

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

＆＃13;

body {
  font-family: 'Open Sans', sans-serif;
}
#Navigation {
  position: fixed;
  left: 10%;
  top: 250px;
  background-color: black;
  text-align: center;
  color: #FFFFFF;
  font-size: x-large;
  height: 50px;
  width: 80%;
  line-height: 50px;
  vertical-align: middle;
  margin: 0 auto;
  border-top: medium solid #FFFFFF;
}
#Navigation a:link,
a:visited {
  color: #FFFFFF;
  text-decoration: none;
  font-size: x-large;
  font-weight: 700;
}
#Navigation a:hover {
  color: #B5B5B5;
  text-decoration: none;
  font-size: x-large;
  font-weight: 700;
}
#Navigation a:active {
  color: #FFFFFF;
  text-decoration: none;
  font-size: x-large;
  font-weight: 700;
}
#Header {
  position: fixed;
  left: 10%;
  top: 0;
  height: 250px;
  width: 80%;
  background-color: #000000;
  margin: 0 auto;
}

＆＃13;

<div id="Header">
  Image to Come
</div>
<div id="Navigation">
  <a href="#Introduction" class="nav-link">Introduction</a>
  &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="#Upcoming-Shows" class="nav-link">Upcoming Shows</a>
  &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="#Services" class="nav-link">Services</a>
  &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="#Previous-Shows" class="nav-link">Previous Shows</a>
  &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="#Contact" class="nav-link">Contact</a>
</div>
<div id="Introduction">
  <center>
    <h1>Introduction</h1>
  </center>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante enim, porta a commodo ac, sodales vel metus. Nulla et magna et augue sagittis volutpat. Pellentesque id est eget eros imperdiet congue et in elit. Aliquam venenatis ullamcorper leo at vehicula.
  Duis vel libero ipsum. Donec eu posuere quam, sit amet posuere risus. Nam malesuada urna id egestas gravida. Aliquam nec imperdiet magna. Nullam interdum, lorem ut sodales molestie, odio ex viverra nunc, vitae tempor orci sem quis ipsum. Ut semper lorem
  sit amet mauris tempus posuere ac et ipsum.
</div>
<div>
  <center>
    <h1 id="Upcoming-Shows">Upcoming Shows</h1>
  </center>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante enim, porta a commodo ac, sodales vel metus. Nulla et magna et augue sagittis volutpat. Pellentesque id est eget eros imperdiet congue et in elit. Aliquam venenatis ullamcorper leo at vehicula.
  Duis vel libero ipsum. Donec eu posuere quam, sit amet posuere risus. Nam malesuada urna id egestas gravida. Aliquam nec imperdiet magna. Nullam interdum, lorem ut sodales molestie, odio ex viverra nunc, vitae tempor orci sem quis ipsum. Ut semper lorem
  sit amet mauris tempus posuere ac et ipsum.
</div>
<div>
  <center>
    <h1 id="Services">Services</h1>
  </center>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante enim, porta a commodo ac, sodales vel metus. Nulla et magna et augue sagittis volutpat. Pellentesque id est eget eros imperdiet congue et in elit. Aliquam venenatis ullamcorper leo at vehicula.
  Duis vel libero ipsum. Donec eu posuere quam, sit amet posuere risus. Nam malesuada urna id egestas gravida. Aliquam nec imperdiet magna. Nullam interdum, lorem ut sodales molestie, odio ex viverra nunc, vitae tempor orci sem quis ipsum. Ut semper lorem
  sit amet mauris tempus posuere ac et ipsum.
</div>
<div>
  <center>
    <h1 id="Previous-Shows">Previous Shows</h1>
  </center>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante enim, porta a commodo ac, sodales vel metus. Nulla et magna et augue sagittis volutpat. Pellentesque id est eget eros imperdiet congue et in elit. Aliquam venenatis ullamcorper leo at vehicula.
  Duis vel libero ipsum. Donec eu posuere quam, sit amet posuere risus. Nam malesuada urna id egestas gravida. Aliquam nec imperdiet magna. Nullam interdum, lorem ut sodales molestie, odio ex viverra nunc, vitae tempor orci sem quis ipsum. Ut semper lorem
  sit amet mauris tempus posuere ac et ipsum.
</div>
<div>
  <center>
    <h1 id="Contact">Contact</h1>
  </center>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante enim, porta a commodo ac, sodales vel metus. Nulla et magna et augue sagittis volutpat. Pellentesque id est eget eros imperdiet congue et in elit. Aliquam venenatis ullamcorper leo at vehicula.
  Duis vel libero ipsum. Donec eu posuere quam, sit amet posuere risus. Nam malesuada urna id egestas gravida. Aliquam nec imperdiet magna. Nullam interdum, lorem ut sodales molestie, odio ex viverra nunc, vitae tempor orci sem quis ipsum. Ut semper lorem
  sit amet mauris tempus posuere ac et ipsum.
</div>

＆＃13;

我想要实现的目标是让顶部<div id="Introduction">位于导航栏下方，当您滚动时，它会将该位置判断为需要滚动到的位置。我已经尝试了我能想到的一切，梳理Position: absolute;和position: fixed;一对margin-top: **px;尝试将所有内容放入<div id="wrapper"></div>以及其他许多我现在无法回想的事情......但没有似乎工作。

非常感谢任何提示或想法。

谢谢！

Answer 1

会尝试使用：

$(document).ready(function() {
    hash=  document.location.hash.substr(1);
        if (hash == "Introduction") {
            $("html, body").delay(50).animate({scrollTop: $('#Introduction').offset().top }, 3000);
        }
    }
});

滚动内容位于主标题和导航栏下方

1 个答案: