鼠标滚动,导航置顶.纯css3的position: sticky;

position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a{　　//定位头部置顶效果
            top: 0;
            position: sticky;
        }
        .b{　　　　//当纯的给个滚动的高度
            width: 100%;
            height: 3000px;
        }
        
    </style>
</head>
<body>
    <div class="a">awsfwegwea</div>
    <div class="b">
        11111111111111111111111111111111111111 <br>            
        22222222222222222<br>
        333333333333333333333333333333333333333 <br>
        4444444444444444444444444444444 <br>
        555555555555555555555555555 <br>
        666666666666666666666 <br>
        77777777777777777777777 <br>
        88888888888888888888888888888 <br>
        99999999999999999999999999999999 <br>
    </div>
</body>
</html>

复制粘贴滚动滑轮即可见到效果……（至于兼容问题，暂且就不考虑了。反正俺也不会！呵呵吧。。。）

由于没什么写的，就顺便将position定位的属性都

static：

　　--即默认不应用

relative（相对定位）：

absolute（绝对定位）：

　　--一般这两个会组合使用，所谓的自绝父相.
- 　　即.relative盒子里面有.absolute 而absolute里需要加top|botton 和 left|right 进行相对于.relative里的空间定位.

fixed：

相对显示器定位,即屏幕本身,不会随滚动条的变化而变化
- 　　同样需要加top|botton 和 left|right 进行空间定位.

center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。

（CSS3）page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

官方定义如上,可试了半天也没效果,然后看到游览器兼容性列表显示全部不支持后……我就释然了

（CSS3）sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

这个就实现了鼠标下滚，拥有这个样式的板块在网页上置顶的效果
- 　　支持的游览器有：Firefox（32.0+），Safari（6.1-9.0^-webkit-），iOS Safari（6.0-9.0^-webkit-）。当前下能支持的。

以下为简单导航效果。

主要是class=“a”和class=“b”两部分。

　　a类是导航，b则是内容，因为懒，所以内容就对付了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a{
            top: 0;
            position: sticky;　　　　//这是那个css3样式
        }
        *{padding: 0;margin: 0;}
        nav{　　　　　　　　　　　　　　//这是个导航
            width: 100%;
            background: #284f86;
            overflow: hidden;
        }
        .ju{
            width: 80%;
            margin: 0 auto;
        }
        .ju ul{
            list-style-type: none;
        }
        .ju ul li{
            padding: 0 10px;
            float: left;
            overflow: hidden;
        }
        .ju ul li a{
            padding: 10px 20px;
            color: #fff;
            display: block;
            text-decoration: none;
        }
        .ju ul li a:hover{
            background: #fff;
            color: #f00;
            border-radius: 5px;
        }
       .b{
            width: 80%;
            height: 800px;　　//因为没内容，所以就先加了个高度
            margin: 0 auto;
        }
    </style>
</head>
<body>
        <nav class="a">
        <div class="ju">
            <ul>
                <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>
    </nav>
    <div class="b">
        11111111111111111111111111111111111111 <br>            
        22222222222222222<br>
        333333333333333333333333333333333333333 <br>
        4444444444444444444444444444444 <br>
        555555555555555555555555555 <br>
        666666666666666666666 <br>
        77777777777777777777777 <br>
        88888888888888888888888888888 <br>
        99999999999999999999999999999999 <br>
    </div>
</body>
</html>

鼠标滚动,导航置顶.纯css3的position: sticky;

猜你喜欢