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

最新推荐文章于 2021-08-13 14:39:29 发布
最新推荐文章于 2021-08-13 14:39:29 发布
阅读量1.8k 收藏
点赞数
分类专栏： JQuery 文章标签： jquery class function xhtml border header

<!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>


导航固定在页面顶部测试

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

roc1010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现移动端导航点击自动滑动效果
12-12
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码，供大家参考，具体内容如下 移动端模拟导航可点击自动滑动 0.1.4。 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】。 废话不多说直接上代码： /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】 */ (function ($) { $.fn.navbarscroll = function (options) { //各
jQuery楼层效果
dibisha5159的博客
05-11 99
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery楼层效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
weixin_33404792的博客
06-03 1114
本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下*{margin: 0;padding: 0;}.navScroll{position: relative;}#overflow{width: 100%;height: 30px;overflow-x: scroll;}#overflow .container{height: 30px;}#overflow .conta...
header导航菜单固定 当页面往下拉时固定导航
12-12
最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分。现在的需求是当页面往下拉时，快捷入口部分被遮住，而导航菜单固定，而且处于window最上面。在StackOverflow网站上搜集过资料，并且参照网站http://ilikecss.com/web-design/examples/framework/20110928/的源代码，发现实现该功能的关键步骤有两点，第一点是需要创建两个header，一个是固定的导航菜单栏，一个是常规的头部（包括快捷入口部分和导航菜单）。另外一点是需要设置z-index的值（对于非static的position来说，z-index越大，它离用户
判断屏幕滚动距离
荧光之烛
10-17 4531
$(window).scroll(function(){ //大于40px         $(window).scrollTop()>40?$("#navfixed").addClass('fixed'):$("#navfixed").removeClass('fixed'); //滚动距离         console.log($(window).scrollTop())    }
jquery实现固定顶部导航效果(仿蘑菇街)
10-27
蘑菇街导航固定顶部的效果想必大伙有所关注吧，想实现吧，本文将带你走完实现之旅，接下来的代码是使用jquery，感兴趣的各位可不要错过了哈
jquery实现导航固定顶部的效果仿蘑菇街
10-25
主要介绍了jquery实现导航固定顶部的效果，仿蘑菇街的，感觉还不错，下面将实例与大家分享下
jQuery仿蘑菇街会员等级进度条动画特效
10-04
jQuery仿蘑菇街会员等级进度条动画特效 jQuery仿蘑菇街会员等级进度条动画特效
高仿蘑菇街 主界面，fragment实现首页tab切换
11-11
高仿蘑菇街 主界面，fragment实现首页tab切换 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
用better-scroll 模仿 app 横向滚动 tab 导航滚动效果
weixin_43978604的博客
12-21 2030
记录 下 js 手写效果 思路 better-scroll 插件 初始化 滚动区 点击事件 获取 index 判断 相应 横向 x 值 预滚动 index+1 或 index -1 的 nav 由于 better-scroll 的snap（配置轮播效果） 属性 没使用过 就直接手写了 效果图 ( gif 压缩了与实际流畅滚动有差) html （需引入 better-sc...
JQuery实现导航栏悬浮吸顶，（最新纯干货）！！！
qq_37698249的博客
10-16 1972
导航栏滚动一定距离后，悬浮吸顶 导航栏悬浮吸顶 JS代码： 1.先引入jquery <script> $(function () { $(window).scroll(function () { if ($(document).scrollTop() >= 621) { $(".nav").addCl...
Bootstrap navbar fixed-top 导航栏 遮盖下方元素 解决
wuyujin1997的博客
05-27 1万+
resolve 两种解决方式： 向<body>元素添加样式style="padding-top: 50px;"，顶部填充的实际大小可自己调整。 向div.nav-bar.fixed-top元素添加样式style="position: sticky;"，实际是修改该导航栏元素的定位属性position， 从原本的fixed到sticky。 两种方法各有优劣。 Bootstrap 4.1...
ROS学习（二）NavSatFix.msg
火柴的初心的博客
09-07 6618
1.sensor_msgs/NavSatFix.h源码 # Navigation Satellite fix for any Global Navigation Satellite System # # Specified using the WGS 84 reference ellipsoid # header.stamp specifies the ROS time for this m...
基于 jquery、iscroll 写的一个导航栏 navscroll 插件
alokka的博客
09-26 1066
移动端h5导航小插件 利用 juery + iscroll 说明 一步登天做不到，但一步一个脚印能做到；一鸣惊人不好做，但一股劲做好一件事，可以做；一下成为天才不可能，但每天进步一点点有可能 这是我第一次写一个 jquery 的小插件 仿照了网上的一个demo github地址： https://github.com/peiluojia/navscroll 喜欢的可以给个 star ...
jQuery实现导航栏头滚动条卷动导航栏固定
Transfer_Jane的博客
06-08 394
&lt;！DOCTYPE html&gt; &lt;html lang =“en”&gt; &lt;head&gt; &lt;meta charset =“UTF-8”&gt; &lt;title&gt;头部导航栏部分固定&lt;/ title&gt; &lt;link rel =“stylesheet”href =“css /base.css“type =”text / css“&gt;
实现可左右滑动的导航菜单页面
林老师带你学编程
04-08 7734
1.wxml页面代码：&lt;view class="nav-scroll"&gt; &lt;scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"&gt; &lt;text wx:for="{{section}}" wx:key="id&q
很好用的移动端左右滑动导航特效
Lucky Star的博客
09-19 6904
页面标题 html{color:#000;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%} html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-colo
原生js实现随着滚动条滚动，导航会自动切换的效果
热门推荐
醉梦人生ing的博客
07-29 1万+
最近学习前端，把前面用原生js写的一段有关tab切换效果的代码贴上，实现的效果比较简陋，请大家见谅 随着滚动条滚动的Tab切换 *{ list-style:none; margin:0; padding:0; text-decoration:none; font-family:'Microsoft YaHei'; } li{ w
如何用css实现当（滚轮滑动到一定位置）时，将【nav导航定位】到图片下方展示
weixin_50450473的博客
08-13 911
初始化效果 鼠标滚动后，变成以下的效果 1.布局2部分，图片和滚动区域 2.在滚动区加上，除去图片的高度和滚动属性 此处减之后的高是 68vh .content_scroll::-webkit-scrollbar{ width: 0; // 隐藏滚动条 } .content_scroll{ overflow-y: scroll; height: 68vh; } 3.给nav导航切换的内容区域（目录/评论）加 滚动区高度减去nav区高度和滚动...
跨越篱笆—蘑菇街每秒最大订单数25倍提升历程 - 蘑菇街技术专家 - 白辉（七公）
07-18
在加入蘑菇街电商团队后，我带领团队同学一起，历时一年，先后主导了蘑菇街系统拆分&服务化1.0体系构建、购买链路核心服务的性能提升&服务架构1.5、服务SLA保障推动稳定性提升&服务架构2.0，完成服务框架、MQ、配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值