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

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

cssjs-suspension-fixed-menu

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

 

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="https://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

 

 

参考推荐：

26个jQuery使用技巧

jQuery 实现侧边浮动导航菜单效果

常用的HTML标签和属性解释