<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .main { width: 1000px; margin: 0 auto; } </style> <script src="jquery-3.4.1.js"></script> <script> $(function () { var H = $(".nav").offset().top; $(window).scroll(function() { var docSccrollTop = $(document).scrollTop(); if (docSccrollTop > H) { $(".nav").css({ "position": "fixed", "top": 0 }); // 此时 nav 的位置固定，如果不设置 main 部分的 margin-top 的话，将有一部分内容被挡住 nav 的高度 $(".main").css("margin-top", $(".nav").height()); } else { $(".nav").css({ "position": "static" }); // 静态定位 $(".main").css("margin-top", 0); } }); }) </script> </head> <body> <div class="top"> <img src="images/top.png" /> </div> <div class="nav"> <img src="images/nav.png" /> </div> <div class="main"> <img src="images/main.png" /> </div> </body> </html>
demo 效果：
