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

Question

我当时做了一个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> 

Answer 1

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

以下CSS：

#content{ padding-top: 110px; }

强制您的内容位于导航链接的顶部，从而阻止其被单击。

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

#content{ padding-top: 110px; }

并替换为

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

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

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