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

【问题标题】：Why do my link not work after adding negative margin to nav?为什么在向导航添加负边距后我的链接不起作用？
【发布时间】：2015-04-20 03:13:39
【问题描述】：

我正在制作一个 Jquery 函数，以使导航栏在滚动通过标题时粘在页面顶部。

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

有什么猜测吗？我该如何解决这个问题以使一切井井有条？

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

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

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

【问题讨论】：

PS当我拿走margin-bottom: -80px;链接有效。当我添加它时，它们不会。 >.>
“链接不起作用”是什么意思？我没有发现任何问题
我的链接在我添加 margin-bottom:-80px 后停止工作；
所以没有任何悬停或活动影响不起作用，并且链接变得无法点击。你说它看起来不错，但在测试中却不是。
尽管有一些配置问题，hover 和 active 伪类处理得很好，点击链接加载新位置。在 Firefox 和 chrome 上测试。

标签： javascript jquery html css

【解决方案1】：

您的内容中有重叠（不可见）的元素覆盖了您的链接。

以下 CSS：

#content{ padding-top: 110px; }

强制您的内容位于导航链接的顶部，阻止它们被点击。

对此有多种解决方案。确认是这种情况的一种方法是删除

#content{ padding-top: 110px; }

替换成

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

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

【讨论】：

谢谢，问题是链接位置没有设置。我必须将其更改为相对，以便它可以继续与周围元素相关的页面流。撞我的问题PLZ！ +1
感谢@JavaFox。我对标题和面包屑有负边距。通过设置 position: relative 链接现在可以工作:-)

【解决方案2】：

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

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

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

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

【讨论】：