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

Question

I was make a Jquery function to make the navigation bar stick to the top of the page when scrolled past the header.

To make it look smooth I had to add padding-top:110px to the content div and margin-bottom: -80px to the nav div. Now my links do not work.

Any guesses to why? And how can I fix this to get everything in order?

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

You have overlapping (invisible) elements from your content that covers your links.

The following CSS:

#content{ padding-top: 110px; }

forces your content to sit on top of your navigation links blocking them from being clicked.

There are several solutions to this. One way to confirm that this is the case is to remove

#content{ padding-top: 110px; }

and replace it with

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

A better way to debug the issue is to open Chrome DevTools and inspecting the #content div to see where the box model overlaps your links and adjust accordingly.

Answer 2

I removed the negative margins applied to the main element, to your nav bar, and removed the height of your header. And also some little other things.

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