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

最新推荐文章于 2021-08-04 02:22:20 发布
最新推荐文章于 2021-08-04 02:22:20 发布
阅读量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
关注
专栏目录
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 108
<!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...
header导航菜单固定 当页面往下拉时固定导航
12-12
最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分。现在的需求是当页面往下拉时，快捷入口部分被遮住，而导航菜单固定，而且处于window最上面。在StackOverflow网站上搜集过资料，并且参照网站http://ilikecss.com/web-design/examples/framework/20110928/的源代码，发现实现该功能的关键步骤有两点，第一点是需要创建两个header，一个是固定的导航菜单栏，一个是常规的头部（包括快捷入口部分和导航菜单）。另外一点是需要设置z-index的值（对于非static的position来说，z-index越大，它离用户
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
weixin_33404792的博客
06-03 1167
本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下*{margin: 0;padding: 0;}.navScroll{position: relative;}#overflow{width: 100%;height: 30px;overflow-x: scroll;}#overflow .container{height: 30px;}#overflow .conta...
jquery实现固定顶部导航效果(仿蘑菇街)
10-27
蘑菇街导航固定顶部的效果想必大伙有所关注吧，想实现吧，本文将带你走完实现之旅，接下来的代码是使用jquery，感兴趣的各位可不要错过了哈
jquery实现导航固定顶部的效果仿蘑菇街
10-25
本文将详细解读如何使用jQuery实现导航栏在网页中固定在顶部的效果，以达到与蘑菇街网站中相似的页面布局。通过本例我们可以学习到以下知识点： 1. jQuery基础知识：首先需要了解jQuery是一个快速、小巧、功能丰富...
jQuery仿蘑菇街会员等级进度条动画特效
10-04
【jQuery仿蘑菇街会员等级进度条动画特效】是一种在网页设计中常见的动态效果，它能够增强用户体验，使得用户能够直观地看到自己在会员系统中的进步。这个特效利用了JavaScript库jQuery的强大功能，结合CSS3的动画...
高仿蘑菇街 主界面，fragment实现首页tab切换
11-11
9. **UI定制**: "高仿蘑菇街"意味着UI设计应尽可能接近蘑菇街应用的样式和交互，这可能涉及到自定义字体、颜色、图标等元素，以及动画效果的实现。 10. **权限申请**：如果应用涉及到网络请求或读写本地存储，需要...
原生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,固定的页面头部导航栏
weixin_34269309的博客
08-04 594
CSS语言：CSSSCSS确定@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");* {-webkit-transition: 0.4s ease;transition: 0.4s ease;}body {margin: 0;background-color: #e5e9e9;font-size: 22px;...
使用border-radius出现缺角的问题
qq_43967413的博客
04-02 4957
一个关于border-radius方面 BUG 手鲁了一个简单的搜索框： 因为需要用到输入的功能，所以理所当然想到了input。因为还要添加按钮，所以就用了一个div做了一个button,个人喜欢圆角的边框那就加上了。 然后出现了以下的问题。 第一个是没有添加border-radius的时候。第二个是添加了border-radius。代码如下。 /* CSS */ .search{ --...
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...
导航栏置顶固定悬浮
weixin_30649859的博客
08-04 1021
<!doctype html><html><head><meta charset="utf-8"><title>网友分享jQuery导航菜单悬浮置顶特效</title><style type="text/css"> *{ margin:0; padding:0;} body{ background:#eee; te...
判断屏幕滚动距离
荧光之烛
10-17 4552
$(window).scroll(function(){ //大于40px         $(window).scrollTop()>40?$("#navfixed").addClass('fixed'):$("#navfixed").removeClass('fixed'); //滚动距离         console.log($(window).scrollTop())    }
ROS学习（二）NavSatFix.msg
火柴的初心的博客
09-07 6851
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...
用better-scroll 模仿 app 横向滚动 tab 导航滚动效果
weixin_43978604的博客
12-21 2046
记录 下 js 手写效果 思路 better-scroll 插件 初始化 滚动区 点击事件 获取 index 判断 相应 横向 x 值 预滚动 index+1 或 index -1 的 nav 由于 better-scroll 的snap（配置轮播效果） 属性 没使用过 就直接手写了 效果图 ( gif 压缩了与实际流畅滚动有差) html （需引入 better-sc...
基于 jquery、iscroll 写的一个导航栏 navscroll 插件
alokka的博客
09-26 1091
移动端h5导航小插件 利用 juery + iscroll 说明 一步登天做不到，但一步一个脚印能做到；一鸣惊人不好做，但一股劲做好一件事，可以做；一下成为天才不可能，但每天进步一点点有可能 这是我第一次写一个 jquery 的小插件 仿照了网上的一个demo github地址： https://github.com/peiluojia/navscroll 喜欢的可以给个 star ...
html纵向固定导航菜单代码,html中导航栏固定在头部或者底部
weixin_29024675的博客
05-30 1243
demo.body{width: 98%;height: 200%;}.nav{background: url("global_nav_bg.png") repeat-x scroll 0 0 transparent;height: 35px;width: 100%;z-index: 9998;position: fixed;left: 0px;}.top{top: 0px;}.bottom{bo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值