jQuery 页面顶部滚动中固定导航栏

简介: jQuery 页面顶部滚动中固定导航栏

<!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 效果:





相关文章
|
7月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
58 0
|
7月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
59 0
|
7月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
36 0
|
8月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
41 0
|
9月前
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
45 0
|
8月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
62 0
|
1月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
7月前
|
JavaScript
jQuery带参数跳转,新页面获取url的参数id
jQuery带参数跳转,新页面获取url的参数id
38 0
|
7月前
|
JavaScript
jQuery实现大屏滚动播放的效果
jQuery实现大屏滚动播放的效果
36 0
|
7月前
|
JavaScript
jQuery实现消息滚动播放的效果
jQuery实现消息滚动播放的效果
35 0