页面固定分类，不随滚动条滚动

最新推荐文章于 2024-09-11 12:01:27 发布

weixin_30721077

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量89

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/wanghaibin/articles/2958696.html

版权

在页面的一侧需要一个固定的分类导航区块，不随着滚动条滚动，但窗口缩小到页面内容的时候，也不会遮住页面内容。

<!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>
<style type="text/css">
.homePage {
    width: 960px;
    height: 1900px;
    background: #FCC;
    margin: 0 auto;
}
.fixedMenu {
    width: 150px;
    height: 342px;
    z-index: 200;
    /*background: url(http://img3.icson.com/template/2013/03/11/136300233619047000_a_35.jpg) no-repeat;*/
    position: fixed;
    top: 160px;
    left: 50%;
    margin-left: 510px;
    _position: absolute;
     _top: expression(eval(document.documentElement.scrollTop + 130));
    border: 1px solid #F00;
}
</style>
</head>

<body>
<div class="homePage">
    <ul class="fixedMenu">
        <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>
</body>
</html>

上面是别的网站拷贝过来的，下面是自己整理后的，没考虑兼容问题，主要起作用的关键是：position:fixed; left:50%; 和margin-left：480px;

<!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>
<style type="text/css">
.homePage {
    width: 960px;
    height: 1900px;/*为了滚动条出现加个高度*/
    margin: 0 auto;/*主页面居中*/
    background: #FCC;/*为了看清变化加个背景色*/
}
.nav {
    width: 150px;
    height: 200px;
    background: #39F;/*为了看清变化加个背景色*/
    position: fixed;/*固定*/
    left: 50%;/*居中*/
    margin-left: 480px;/*偏移主页面宽度的一半 480px */
}
</style>
</head>

<body>
<div class="homePage">
    <div class="nav"></div>
</div>
</body>
</html>