当前位置:Gxlcms > JavaScript > 用jQuery实现固定导航栏效果

用jQuery实现固定导航栏效果

时间:2021-07-01 10:21:17 帮助过:8人阅读

jQuery实现固定导航栏效果:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>固定导航栏效果</title>
  6. <style type="text/css">
  7. *{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. body{
  12. text-align: center;
  13. }
  14. .fixed{
  15. top: 0;
  16. left: 0;
  17. position: fixed;
  18. }
  19. </style>
  20. <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  21. <script>
  22. $(document).ready(function(){
  23. //
  24. 入口函数
  25. $(window).scroll(function(){
  26. //
  27. 添加滚动事件
  28. if($(window).scrollTop() >= $(".top").height()){
  29. //
  30. 判断窗口的滚动如果大于top的高度就为nav添加fixed
  31. $(".nav").addClass("fixed");
  32. }else{
  33. //
  34. 否则就为nav移除fixed
  35. $(".nav").removeClass("fixed");
  36. }
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <p class="top">
  43. <img src="img/top.png"/>
  44. </p>
  45. <p class="nav">
  46. <img src="img/nav.png"/>
  47. </p>
  48. <p class="main">
  49. <img src="img/main.png"/>
  50. </p>
  51. </body>
  52. </html>


以上就是用jQuery实现固定导航栏效果的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行