如何在IE6及以上版本中制作“Stay-On-Top”菜单?

时间:2014-02-10 07:34:57

标签: javascript jquery html css

我想在 IE6 及更高版本中使用固定位置和内容滚动功能在顶部创建菜单。 我尝试过jsfiddle.net代码,但它有css属性position:fixed;这不支持IE6。

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Dynamic Top Menu Positioning - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .menu {
    background:#345;
    color:#FFF;
    height:2em;
    padding:.5em;
    position:absolute;
    top:50px;
    width:100%;
}
.fixed {
    position:fixed;
    top:0;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
/* Dynamic top menu positioning
 *
 */

var num = 50; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
});//]]>  

</script>


</head>
<body>
  <div class="menu">Menu</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />(Bottom!)

</body>


</html>

以下链接不支持IE6 scroll-fix-header-jquery-facebooknagging-menu-with-css3-and-jquery

任何人都可以帮助我在 IE6及以上

中实现这一目标

1 个答案:

答案 0 :(得分:0)

我从网站Fixed Position DIV in IE6

获得了解决方案