將負邊距添加到導航后，為什么我的鏈接不起作用？

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>