用jquery实现仿蘑菇街导航固定顶部的效果

最新推荐文章于 2024-09-11 12:01:27 发布
最新推荐文章于 2024-09-11 12:01:27 发布
阅读量4.4k 收藏 2
点赞数
分类专栏： js 文章标签： jquery class function xhtml border header
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfcss/article/details/7998777
版权


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var headHeight=$(".header").height()+10;
    var nav=$(".nav");
    $(window).scroll(function(){
        if($(this).scrollTop()>headHeight){
            nav.addClass("navFix");
            }
        else{
            nav.removeClass("navFix");
            }
        })
    })
</script>
<style type="text/css">
     *{ margin:0; padding:0;}
     body{ _background-attachment:fixed; _background-image:url(about:blank);} //实现ie6不支持fixed方法
     .header{ width:1000px; height:60px; margin:0 auto; text-align:center;}
    .nav{ border:1px solid #ccc; border-radius:5px; overflow:hidden; height:30px; width:1000px; margin:10px auto; background:#fff;}
    .nav li{ float:left; padding:0 10px; height:30px; line-height:30px;}
    .nav li a{ text-decoration:none; color:#0CF;}
    .nav li a:hover{ color:#000; text-decoration:underline;}
    .nav ul{ list-style:none;}
    .navFix{ position:fixed; left:0; top:0; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;} //实现ie6不支持fixed方法
    .content{ width:1000px; margin:10px auto;}
</style>
</head>

<body>
<div class="header">
    <h1>导航固定在页面顶部测试</h1>
    </div>
<div class="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">蓝枫前端</a></li>
        <li><a href="">蓝枫前端</a></li>
        <li><a href="">蓝枫前端</a></li>
        <li><a href="">蓝枫前端</a></li>
        <li><a href="">蓝枫前端</a></li>
        <li><a href="">蓝枫前端</a></li>
        <li><a href="">蓝枫前端</a></li>
    </ul>
</div>
<div class="content">
<p>11111</p>
<p>11111</p>
<p>11111</p><p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div>
</body>
</html>


前端岚枫
关注
专栏目录
jquery实现固定顶部导航效果(仿蘑菇街)
10-27
蘑菇街导航固定顶部的效果想必大伙有所关注吧，想实现吧，本文将带你走完实现之旅，接下来的代码是使用jquery，感兴趣的各位可不要错过了哈
jquery实现导航固定顶部的效果仿蘑菇街
10-25
本文将详细解读如何使用jQuery实现导航栏在网页中固定在顶部的效果，以达到与蘑菇街网站中相似的页面布局。通过本例我们可以学习到以下知识点： 1. jQuery基础知识：首先需要了解jQuery是一个快速、小巧、功能丰富...
用Jquery 仿VS 样式的 导航栏插件
weixin_30547797的博客
08-04 172
在开发B/S 项目过程中，根据主界面设计要求，需要做一个类似VS 左边工具栏样式的菜单导航栏，在网上搜索无果后，于是决定自已做一个。 由于前台用JQuery开发， 想到网上很多人用JQuery做插件，开发起来很方便。于是呼，我也照猫画虎地瞎做一个，限本人文采水平一般，只能贴代码共享。 效果图： 代码： 1 /* 2 * toolsTags ...
jquery:Fix Table Header
我想我是海 冬天的大海 心情随风轻摆
03-31 4233
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:style type="text/css"><!-- .tabWordBreak{t
jQuery入门精讲
06-22
本课程帮助学员掌握jQuery的基本用法及技能，使学员在前端开发过程中事半功倍，从而更加高效的完成开发工作。【课程特色】 1、课程设计循序渐进、讲解细致、通俗易懂、非常适合自主学习 2、教学过程实例丰富、强调技术关键点、并且分析透彻 3、物美价廉：本着知识共享、帮助更多有需求者原则，毫无保留，不另外设置VIP课程。 此外，提供源代码+答疑+上课日志。
使用绝对定位或弹性布局实现顶部导航栏固定效果,css知识温习
业余前端的职业经历
03-12 1931
头部固定 和底部菜单固定 中间内容滚动的效果 还是 比较常见的 我们先来看下效果吧 看到上面的效果 可能很多大佬不会像我这菜鸟一样 想到用 fixed 固定定位 但大神给我提供了一种新的解决方法 就是通过固定定位 和 弹性布局来实现这个效果 说实话吧 固定定位 在手机端浏览器还是少用小心被当作广告屏蔽了哈 1 . dom结构就很简单 <div class="container"> <header> 顶部消...
jQuery仿蘑菇街会员等级进度条动画特效
10-04
【jQuery仿蘑菇街会员等级进度条动画特效】是一种在网页设计中常见的动态效果，它能够增强用户体验，使得用户能够直观地看到自己在会员系统中的进步。这个特效利用了JavaScript库jQuery的强大功能，结合CSS3的动画...
高仿蘑菇街 主界面，fragment实现首页tab切换
11-11
9. **UI定制**: "高仿蘑菇街"意味着UI设计应尽可能接近蘑菇街应用的样式和交互，这可能涉及到自定义字体、颜色、图标等元素，以及动画效果的实现。 10. **权限申请**：如果应用涉及到网络请求或读写本地存储，需要...
jQuery滚动顶部固定导航菜单
Showing_abc的博客
10-15 920
jQuery滚动顶部固定导航菜单 图片效果如下： index.html &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;h
JQuery实现悬浮工具条
bangbang0203的博客
06-28 411
实现效果如下 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title&g...
设计测试用例（蘑菇街web的登录页面）
qq_40518671的博客
04-12 1845
下图是蘑菇街web的登录页面，根据图中的内容涉及相应的用例。 1、功能测试： （1）正常输入用户名、邮箱、手机号和对应的密码能够正常登录 （2）用户名、邮箱、手机号输错、密码正确无法登陆，反之一样 （3）用户名、邮箱、手机号和密码不匹配时有相应的提示 2、性能测试： 考虑高并发登录时，系统的稳定性以及用户的体验性。 3、安全测试： 考虑用户名或者密码包含sql注入、xss攻击等安全问题 4、兼容...
HTML5开发动态网格布局的jQuery插件BlocksIt.js 瀑布流
ccnanxi的博客
11-04 1488
HTML5瀑布流效果——BlocksIt.js 瀑布流     动态网格布局的jQuery插件 $(document).ready(function() {            //blocksit define     $(window).load( function() {         $('#container').BlocksIt({
js控制的动态简易音乐页面
weixin_44900104的博客
04-08 566
js控制的动态音乐页面 自学半个多月前端，尝试这第一次独立完成一个简单的页面布局，虽然看起来很low，但是好好加油就可以哒，本页面主要是想实现js控制动态展示效果，但是由于目前能力有限，所以不是很完美，如果有不完善的地方，希望大佬能及时指出。 下面将效果图与源码全部附上-------- <!DOCTYPE html> <html lang="en"> <head&g...
JQUERY仿蘑菇街布局
tomyjohn的专栏
10-09 2501
有时候不得不佩服国外程序员的才华和开源精神，这个小东西可以简单地实现蘑菇街的布局 masonry 网址：http://masonry.desandro.com/
Vue.js项目：在线商城软件项目总结
y_xiuzhu的博客
04-06 1571
Vue-Elm-Shop Welcome to Vue-Elm-Shop???? ???? 如何运行 # 克隆 git clone https://github.com/yxiuzhu/mushroom.git # 打开项目目录 cd mushroom # 安装依赖 npm install # 开启本地服务运行项目 npm run serve 项目演示 项目演示地址（请用chrome手机模式预览） 项目页面及功能 Home 商城首页 Cart 购物车详情页 Deta
XHTML简介
qq_48501521的博客
09-11 996
XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。
【高创新】基于鲸鱼优化算法WOA-Transformer-LSTM实现故障识别Matlab实现.rar
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
《冯唐成事心法》学习笔记01：逆境来，了怎么办？
最新发布
09-18
《冯唐成事心法》学习笔记01：逆境来，了怎么办？
HTML5期末大作业：仿蘑菇街购物商城网页设计源码
3. **JavaScript交互**：JavaScript用于实现动态效果，如导航栏的交互、鼠标悬停特效等。学生应熟悉DOM操作、事件监听、函数和变量的概念，以及可能涉及的jQuery库。 4. **响应式设计**：由于设计要求适应不同的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端岚枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值