粘性导航栏技巧（固定的jQuery）

Question

Basically, when the nav bar (or whatever element) reaches the top of the page or window, it will add a class of sticky to the element and the CSS will make it fixed. 基本上，当导航栏（或任何元素）到达页面或窗口的顶部时，它将为元素添加粘性类，并且CSS会将其固定。 Works as an IF statement so when it is no where near the top it removes the class so it is back to normal. 用作IF语句，因此如果在顶部附近没有位置，它将删除该类，使其恢复正常。

I have completed all the code correctly, double and triple checking everything. 我已经正确完成了所有代码，对所有内容进行了两次和三次检查。 When in the Developer tools on Chrome, I can see the jQuery is doing it's job correctly, adding and removing the class at the right time, just the CSS doesn't seem to work. 在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>

Thank you in advance 先感谢您

Answer 1

Your css doesn't tell it where to be fixed, just change it to 您的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