粘性導航欄技巧（固定的jQuery）

Question

基本上，當導航欄（或任何元素）到達頁面或窗口的頂部時，它將為元素添加粘性類，並且CSS會將其固定。 用作IF語句，因此如果在頂部附近沒有位置，它將刪除該類，使其恢復正常。

我已經正確完成了所有代碼，對所有內容進行了兩次和三次檢查。 在Chrome的開發人員工具中，我可以看到jQuery正確地完成了它的工作，在正確的時間添加和刪除了該類，只是CSS似乎不起作用。

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

 * { margin: 0; padding: 0; font-family: "Helvetice Neue", sans-serif; } @font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeue.otf"); } html, body { width: 100%; height: 100%; } div#container { width: 100%; height: 100%; } div#content { width: 100%; height: 100%; } section#main-bg { width: 100%; height: 100%; } #main-bg img { width: 100%; height: 100%; position: fixed; z-index: -9999; /* always on bottom */ } nav { width: 100%; height: 60px; bottom: -60px; background-color: #333333; } /* nav */ .sticky { position: fixed; } nav ul { float: right; } nav ul li { float: left; margin-left: 40px; list-style: none; } nav ul li a { text-decoration: none; color: white; padding: 20px; line-height: 60px; } div#content { width: 100%; height: 2000px; background-color: #dedede; bottom: 0; }

 <!DOCTYPE html> <html> <head> <title>Josh Murray | My Personal Page</title> <meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/main_styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="scripts/homemadeSticky.js"></script> </head> <body> <div id="container"> <section role="banner" id="main-bg"> <!-- this is where the full screen image will be --> <img src="img/bg.jpg"> </section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div id="content"> <!-- content in here --> </div> </div> </body> </html>

先感謝您

Answer 1

您的css不會告訴它要在哪里修復，只需將其更改為

.sticky {
    position: fixed;
    top: 0;
}

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

 * { margin: 0; padding: 0; font-family: "Helvetice Neue", sans-serif; } @font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeue.otf"); } html, body { width: 100%; height: 100%; } div#container { width: 100%; height: 100%; } div#content { width: 100%; height: 100%; } section#main-bg { width: 100%; height: 100%; } #main-bg img { width: 100%; height: 100%; position: fixed; z-index: -9999; /* always on bottom */ } nav { width: 100%; height: 60px; bottom: -60px; background-color: #333333; } /* nav */ .sticky { position: fixed; top: 0; } nav ul { float: right; } nav ul li { float: left; margin-left: 40px; list-style: none; } nav ul li a { text-decoration: none; color: white; padding: 20px; line-height: 60px; } div#content { width: 100%; height: 2000px; background-color: #dedede; bottom: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Josh Murray | My Personal Page</title> <meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/main_styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="scripts/homemadeSticky.js"></script> </head> <body> <div id="container"> <section role="banner" id="main-bg"> <!-- this is where the full screen image will be --> <img src="img/bg.jpg"> </section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div id="content"> <!-- content in here --> </div> </div> </body> </html>

粘性導航欄技巧（固定的jQuery）

問題描述

1 個解決方案

解決方案1
2 2015-07-31 18:54:14

粘性導航欄技巧（固定的jQuery）

問題描述

1 個解決方案

解決方案1 2 2015-07-31 18:54:14

解決方案1
2 2015-07-31 18:54:14