CSS+JS 悬浮固定菜单效果

最新推荐文章于 2023-12-20 15:48:26 发布

听海Movie

最新推荐文章于 2023-12-20 15:48:26 发布

阅读量1k

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/u011781769/article/details/48470875

版权

Html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

JS + CSS 经典实现

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

听海Movie

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS+JS 悬浮固定菜单效果

首先，先看实例，米扑代理： http://proxy.mimvp.com/price.php效果如下图，兼容chrome，firefox，windows，360，搜狗等主流浏览器JS + CSS 经典实现悬浮固定菜单 .wrapper { width:1000px; height:2000px; margin-
复制链接

扫一扫

专栏目录