码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-05-21 16:07:54      阅读:374      评论:0      收藏:0      [点我收藏+]

标签:ext   定位   分页   img   title   ack   css3   none   static   

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:对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如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;

标签:ext   定位   分页   img   title   ack   css3   none   static   

原文地址:https://www.cnblogs.com/yinwangyizhi/p/9041797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!