Question

当我滚动浏览标题时，我创建了一个Jquery函数，使导航栏粘在页面顶部。

为了让它看起来流畅，我必须将padding-top:110px添加到内容div，将margin-bottom: -80px添加到nav div。现在我的链接不起作用。

任何猜测为什么？我怎样才能解决这个问题以使一切井然有序？

＆＃13;

$(document).ready(function() {
  var stickyNavTop = $('.nav').offset();

  var stickyNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop.top) {
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky');
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

＆＃13;

html,
body {
  height: 100%;
  position: relative;
}
#body {
  width: 80%;
  min-height: 100%;
  border: 1pxcenter;
  margin: 0 auto;
}
#header {
  width: 100%;
  height: 40%;
  border: 1px dotted blue;
  margin: auto;
}
.nav {
  margin-bottom: -80px;
  border: 1px solid black;
  width: 100%;
  height: 80px;
  z-index: 1;
  position: -webkit-sticky;
}
a:visited {
  color: black;
}
a:hover {
  color: yellow;
}
a:active {
  color: green;
}
#link {
  height: 100%;
  width: 20%;
  display: inline-block;
  float: left;
  border: 1px dotted green;
  text-decoration: none;
  text-align: center;
  padding: none;
}
.sticky {
  border: 1px solid black;
  position: fixed;
  width: 80%;
  top: 0;
  z-index: 100;
  border-top: 0;
}
.nav div p {
  padding-top: 10px;
  font-size: 1em;
}
#content {
  border: 1px solid green;
  position: relative;
  padding-top: 110px;
  padding-bottom: 100px;
  display: block;
  width: 100%;
  max-height: 100%;
  margin: none;
  text-align: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <h1>FrontYard Fairways</h1>
  <h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
  <a href="FYFHome.html">
    <div id="link">
      <p>Home</p>
    </div>
  </a>
  <a href="Services.html">
    <div id="link">
      <p>Services</p>
    </div>
  </a>
  <a href="Customers.html">
    <div id="link">
      <p>Our Customers</p>
    </div>
  </a>
  <a href="About.html">
    <div id="link">
      <p>About</p>
    </div>
  </a>
  <a href="Contact.html">
    <div id="link">
      <p>Contact</p>
    </div>
  </a>
</nav>
<main id="content">
  <div>
    <p>
      Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
      lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
      blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
      hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
      ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
      blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
      lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
      Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
      ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
      ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
      blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
      hblahablahahlahablhablahablhaablahablhablahablahablahablah
    </p>
  </div>

</main>

＆＃13;

Answer 1

您的内容中包含链接的重叠（不可见）元素。

以下CSS：

#content{ padding-top: 110px; }

强制您的内容位于导航链接之上，阻止其被点击。

有几个解决方案。确认是这种情况的一种方法是删除

#content{ padding-top: 110px; }

并将其替换为

#content{ position:relative; top:110px; }

调试问题的更好方法是打开Chrome DevTools并检查#content div以查看框模型与链接重叠的位置并进行相应调整。

Answer 2

我删除了应用于主要元素的负边距，导航栏，并删除了标题的高度。还有一些其他的东西。

＆＃13;

$(document).ready(function() {
  var stickyNavTop = $('.nav').offset();

  var stickyNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop.top) {
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky');
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

＆＃13;

html,
body {
  height: 100%;
  position: relative;
}
#body {
  width: 80%;
  min-height: 100%;
  border: 1pxcenter;
  margin: 0 auto;
}
#header {
  width: 100%;
  /* height: 40%; => that makes your header overlapping with your nav bar*/ 
  border: 1px dotted blue;
  margin: auto;
}
.nav {
  
  border: 1px solid black;
  width: 100%;
  height: 80px;
  z-index: 1;
  /*
  the support of position:sticky is bad: http://caniuse.com/#feat=css-sticky
  position: -webkit-sticky;
  */
  background: rgba( 255,255,255,0.9);
  transition: width 0.5s;
}
a:visited {
  color: black;
}
a:hover {
  color: yellow;
}
a:active {
  color: green;
}
#link {
  height: 100%;
  width: calc(20% - 1px );;
  display: inline-block;
  float: left;
  border: 1px dotted green;
  border-right-width: 0;
  
  text-decoration: none;
  text-align: center;
  padding: none;
}
.sticky {
  border: 1px solid black;
  position: fixed;
  width: 80%;
  top: 0;
  border-top: 0;
}
.sticky + #content{
  margin-top:80px
}

.nav div p {
  padding-top: 10px;
  font-size: 1em;
}
#content {
  border: 1px solid green;
  padding-top:1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <h1>FrontYard Fairways</h1>
  <h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
  <a href="FYFHome.html">
    <div id="link">
      <p>Home</p>
    </div>
  </a>
  <a href="Services.html">
    <div id="link">
      <p>Services</p>
    </div>
  </a>
  <a href="Customers.html">
    <div id="link">
      <p>Our Customers</p>
    </div>
  </a>
  <a href="About.html">
    <div id="link">
      <p>About</p>
    </div>
  </a>
  <a href="Contact.html">
    <div id="link">
      <p>Contact</p>
    </div>
  </a>
</nav>
<main id="content">
  <div>
    <p>
      Blahblahablahahlahablhablahablhaab <br/><br/><br/><br/><br/><br/>
lhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
      lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
      blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
      hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
      ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
      blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
      lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
      Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
      ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
      ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
      blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
      hblahablahahlahablhablahablhaablahablhablahablahablahablah
    </p>
  </div>

</main>

＆＃13;

为导航添加负边距后，为什么我的链接不起作用？

2 个答案: