position sticky 定位

1、兼容性

https://caniuse.com/#search=sticky

position sticky 定位_第1张图片

chrome、ios和firefox兼容性良好。

 

2、使用场景

sticky:粘性。粘性布局。

在屏幕范围内时,元素不受定位影响(即top、left等设置无效);

当元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

说明:元素并没有脱离文档流

 

示例一:

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>position:sticky示例title>
        <style type="text/css">
            .container {
                background: #eee;
                width: 600px;
                height: 10000px;
                margin: 0 auto;
            }

            .sticky-box {
                position: -webkit-sticky;
                position: sticky;
                height: 60px;
                margin-bottom: 30px;
                background: #ff7300;
                top: 0px;
            }

            div {
                font-size: 30px;
                text-align: center;
                color: #fff;
                line-height: 60px;
            }
        style>
    head>
    <body>
        <div class="container">
            <div class="sticky-box">内容1div>
            <div class="sticky-box">内容2div>
            <div class="sticky-box">内容3div>
            <div class="sticky-box">内容4div>
        div>
    body>
html>

效果:

position sticky 定位_第2张图片

示例二:实现头部固定的导航栏

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>position:sticky示例title>
        <style type="text/css">
            .container {
                background: #eee;
                width: 600px;
                height: 10000px;
                margin: 0 auto;
            }

            nav {
                position: -webkit-sticky;
                position: sticky;
                top: 0;

            }

            nav {
                height: 50px;
                background: #999;
                color: #fff;
                font-size: 30px;
                line-height: 50px;
            }

            .content {
                margin-top: 30px;
                background: #ddd;
            }

            p {
                line-height: 40px;
                font-size: 20px;
            }
        style>
    head>
    <body>
        <div class="container">
            <nav>我是导航栏nav>
            <div class="content">
                <p>我是内容栏p>
                <p>我是内容栏p>
                <p>我是内容栏p>
                <p>我是内容栏p>
                <p>我是内容栏p>
                <p>我是内容栏p>
                <p>我是内容栏p>
                <p>我是内容栏p>
            div>
        div>
    body>
html>

效果:

position sticky 定位_第3张图片

你可能感兴趣的:(position sticky 定位)