CSS+JS 悬浮固定菜单效果

最新推荐文章于 2024-07-25 09:25:29 发布
最新推荐文章于 2024-07-25 09:25:29 发布
阅读量1.5w 收藏 6
点赞数 2
分类专栏： Script
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ithomer/article/details/47858847
版权

首先，先看实例，米扑代理： http://proxy.mimvp.com/price.php

效果如下图，兼容chrome，firefox，windows，360，搜狗等主流浏览器

cssjs-suspension-fixed-menu

米扑代理，是由百度，小米出来的工程师创建，做得非常棒，功能很全很贴心。

 

JS + CSS 经典实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE HTML>
< html lang = "en-US" >
< head >
< title >悬浮固定菜单</ title >
< style type = "text/css" >
     .wrapper {
         width:1000px;
         height:2000px;
         margin-left:auto;
         margin-right:auto;
         text-align: center;
     }
 
     .header {
         height:150px;
     }
 
     #nav {
         padding: 10px;
         position: relative;
         top: 0;
         background: #375069;
         width: 1000px;
     }
 
     #nav a {
         display:inline-block;
         margin:0 10px;
         *display:inline;
         color:white;
         width: 15%;
     }
 
     p a {
         margin:0 10px;
         width: 15%;
     }
 
</ style >
 
< script type = "text/javascript" >
     window.onload = function(){
         menuFixed('nav');
     }
 
     function menuFixed(id){
         var obj = document.getElementById(id);
         var objHeight = obj.offsetTop;
     
         window.onscroll = function(){
             var obj = document.getElementById(id);
             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
             if(scrollTop < objHeight ){
                 obj.style.position = 'relative' ;
             }else{
                 obj.style.position = 'fixed' ;
             }
         }
     }
</script>
</ head >
 
< body >
     < div class = "wrapper" >
 
         < div class = "header" >
         </ div >
         < div id = "nav" >
             < a href = "http://proxy.mimvp.com" >米扑代理</ a >
             < a href = "http://apptop.mimvp.com" >米扑排名</ a >
             < a href = "http://domain.mimvp.com" >米扑域名</ a >
             < a href = "http://blog.mimvp.com" >米扑博客</ a >
             < a href = "http://forum.mimvp.com" >米扑论坛</ a >
         </ div >
 
         < div id = "content" style = "text-align: left;" >
              < p >悬浮经典实例请参考：米扑代理</ p >
 
             < p >米扑代理价格表实例： </ p >
              
             < p >< a href = "http://proxy.mimvp.com/price.php" >http://proxy.mimvp.com/price.php</ a ></ p >
      
              < p >悬浮经典实例请参考： 米扑代理</ p >
 
             < p >米扑代理价格表实例： </ p >
              
             < p >< a href = "http://proxy.mimvp.com/price.php" >http://proxy.mimvp.com/price.php</ a ></ p >
      
              < p >悬浮经典实例请参考： 米扑代理</ p >
 
             < p >米扑代理价格表实例： </ p >
              
             < p >< a href = "http://proxy.mimvp.com/price.php" >http://proxy.mimvp.com/price.php</ a ></ p >
         </ div >
 
     </ div >
</ body >
</ html >

运行效果：

cssjs-suspension-fixed-menu-01

 

示例代码下载

mimvp_navi_demo.tar

阳光岛主
关注
专栏目录
JS实现自动固定顶部的悬浮菜单栏效果
10-23
主要介绍了JS实现自动固定顶部的悬浮菜单栏效果,涉及JavaScript针对[removed]事件的响应及页面样式动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
美观又实用，纯 CSS 悬浮菜单让网站更加出色
希望看完文章的你能够带着答案离开
02-06 4105
美观又实用，纯 CSS 悬浮菜单让网站更加出色
常见CSS属性（二）——浮动
最新发布
weixin_64294248的博客
07-25 593
浏览器在解析html文档时，正常的顺序是从上往下、从左往右解析。这个正常的解析过程，叫做正常文档流(标准文档流)，而浮动就是使得元素脱离文档流，“浮”在浏览器上。浮动会使元素脱离文档流，不占位置，在需要多个元素在同一行时，设置元素靠左或者靠右摆放，可以使用浮动，但使用浮动时，需要清除浮动，以免影响后续的元素。
HTML + CSS 实现悬浮菜单
Peanutfight的博客
03-11 908
HTML + CSS 实现悬浮菜单
js实现悬浮菜单
02-21
js实现悬浮菜单
CSS特殊样式（九）悬浮效果菜单
front_end_fan
09-04 4270
效果图：
CSS javascript 结合实现悬浮固定菜单效果
10-23
在本示例中，还提到了一个米扑代理，这是一个由百度和小米的工程师创建的项目，提供了许多实用的功能，可见这个悬浮菜单可能是其一部分的功能实现。这个细节对用户来说是一个额外的信息，了解背后的服务和项目可以...
效果直逼flash的Div+Css+Js菜单
10-30
标题中的“效果直逼flash的Div+Css+Js菜单”是指使用HTML的Div元素、CSS样式和JavaScript脚本来创建一种动态交互的菜单效果，这种效果能够媲美早期流行且视觉效果丰富的Flash技术。在Web开发中，由于Flash不支持所有...
html+css+javascript 电商网站web+mobile实战项目
12-28
在这个电商项目中，CSS将用于实现商品展示的美观样式，如色彩搭配、响应式布局、悬浮菜单、动画效果等。初学者需要掌握盒模型、定位、Flexbox或Grid布局系统，以及媒体查询（Media Queries）来实现移动端的自适应...
HTML+CSS+JS原神官网实现
05-11
在这个项目中，你将使用原生JavaScript来实现动态功能，如导航栏的下拉菜单、轮播图、悬浮按钮等。你将学习到事件监听（event listeners）、DOM操作（Document Object Model，用于访问和修改HTML元素）、定时器...
超酷的HTML5/CSS3 3D气泡悬浮菜单
08-23
之前我们分享过各式各样的网页菜单，有基于jQuery的，也有基于HTML5和CSS3的，很多都比较炫酷和实用，比如这款jQuery 3D 垂直多级菜单就非常实用，还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单，每一个菜单项是一个个3D样式的悬浮气泡，点击菜单项后就可以激活当前菜单。
javascript左侧悬浮二级菜单
05-29
左侧悬浮二级菜单 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
JS实现悬浮导航(实用)
05-05
浏览网页时，滚动鼠标拉动网页后，导航不消失，悬浮于浏览器上。用户体验很好，实用性很强，很多知名网站在使用，前端学习者必会的技能。
html+css实现全局固定位置悬浮的菜单
陈表达的博客
09-28 756
【代码】html+css实现全局固定位置悬浮的菜单。
固定悬浮css属性
mufengdeying111的博客
12-24 194
固定悬浮 position: sticky
网页悬浮导航栏、采用scroll滚动事件在js里监测内容的滚动距离以此控制导航栏的状态，内含具体函数详细介绍，导航栏模板~
weixin_52091264的博客
07-11 526
利用js实现网页的悬浮导航栏。导航栏网页模板。
js点击式下拉菜单与悬浮式下拉菜单
每一步的地方，每一站都不会忘。
03-14 2413
点击出现下拉菜单 HTML部分 <div id="clickOpen"> 点击展开 </div> <br /> <ul class="list"> <li class="item">收藏的商品</li> <li class="item">收藏的店铺</li> </ul> css部分 #clickOpen { display: inline; padding: 5px 20px;
总算实现了动态菜单的浮动效果
chenji001的专栏
12-10 564
其实就是简单的用了下translate效果。还琢磨了半天，呵呵 UI实在是没有搞过。 另外，android:background 属性配上好的背景图片，可以增加效果不少，呵呵。
前端悬浮菜单的实现方法及完整代码示例
Sun_blog
09-13 912
前言 悬浮菜单作为网页设计中常见的交互元素，通常被用于展示常用功能或导航链接。 在前端开发领域中，我们可以利用纯CSS技术实现一个简单的悬浮菜单。 本文将详细介绍实现悬浮菜单的方法，并提供一个完整的代码示例。 实现方法 要实现一个悬浮菜单，我们需要考虑以下几个步骤： 创建 HTML 结构：使用<ul>和<li>来构建菜单的结构。 使用 CSS 设置样式：设置菜单容...
创建悬浮墙菜单：CSS3+jQuery实现指南
"如何使用CSS3+JQuery实现悬浮墙式菜单" 在网页设计中，创建一个吸引人的用户体验是至关重要的。悬浮墙式菜单是一种创新的交互设计方式，它结合了CSS3、JQuery和HTML5的技术，使得用户只需简单地悬停在菜单项上，就...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值