css怎么设置粘性定位?

css怎么设置粘性定位?

粘性定位的设置方法是给元素添加position: sticky; ,sticky是css定位新增属性,类似static(没有定位) 和 固定定位fixed 的结合。

它主要用在对 scroll 事件的监听上,简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top:100px);(相关课程推荐:css视频教程

position:sticky这时的效果相当于fixed定位,固定到适当位置

1、sticky的使用:

#sticky-nav {
    position: sticky;
    top: 100px;
}

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件:

  • 父元素不能overflow:hidden或者overflow:auto属性。

  • 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位

  • 父元素的高度不能低于sticky元素的高度

  • sticky元素仅在其父元素内生效

2、示例:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #sticky-nav {
            position: sticky;
            top: 0px;
            background: skyblue;
        }
        #sticky-nav > ul{
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-around;
        }
        #sticky-nav > ul > li{
            color: #fff;
            padding: 8px 4px;
        }
        p{
            height: 100px;
            line-height: 100px;
            margin: 6px 0;
            background: #eee;
        }
    </style>
</head>
<body>

    <p>一段文字</p>
    <div id="sticky-nav">
        <ul>
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
            <li>导航4</li>
        </ul>
    </div>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
    <p>一段文字</p>
</body>
</html>

效果:

4.gif

Image placeholder
前端答疑
未设置
  64人点赞

没有讨论,发表一下自己的看法吧

推荐文章
CSS粘性定位(position: sticky)是怎样工作的?

浏览器对CSS粘性定位有着非常好的支持,但很多开发者都没有用过它。究其原因有两个: ● 第一,受到浏览器的良好支持需要漫长的等待:浏览器的支持往往需要很长的时间才能完成,到时候它的功能已经被人们遗忘了

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

dreamweaver中CSS怎么设置

dreamweaver中CSS怎么设置1、打开软件后,我们可以直接按下快捷键【Ctrl+J】2、或者,我们点击菜单栏的修改命令按钮。3、然后,我们点击页面属性按钮。4、接下来我们就会看到页面属性这个窗

css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

css怎么设置字体为宋体?

css怎么设置字体为宋体?css设置字体使用font-family属性,设置为宋体,可以使用font-family:宋体;,或者font-family:SimSun;。font-family:规定元素

css文字水平垂直居中怎么设置?

1、文字水平居中在CSS中想要让文字水平居中,可以使用text-align:center;。text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和c

css段落间怎么设置距离?

1、使用line-height属性设置line-height属性设置行间的距离(行高)。不允许使用负值。line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最

css中怎么设置没有内容时高度为0

css中怎么设置没有内容时高度为0默认情况下HTML元素没有内容时,高度就是0,不需要手动设置。但这时有些元素仍然具有margin属性,这会对其他元素造成影响,如p标签。(相关课程推荐:css视频教程

css中怎么设置图片大小?

css中怎么设置图片大小?语法:img{ width:150px; height:60px; }注:这里设置CSS宽度为150px,css高度为60px,CSS样式中width和height的值都单位

css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

css定位怎么实现居中?

css定位怎么实现居中?使用绝对定位absolute是一种常用、兼容性很好的方式。.element{ width:600px;height:400px; position:absolute; left

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

css怎么画三角形?

css怎么画三角形?三角形实现原理:宽度width为0;height为0;方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置

css怎么让字体不换行?

在css中,可以使用white-space属性来强制文字字体不换行;通常我们使用white-space:nowrap来强制文本文字内容不换行,文本会在在同一行上显示,直到遇到标签为止。示例:

css怎么做直角三角形

css怎么做直角三角形一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,

thinkphp加载不了css怎么办?

thinkphp加载不了css怎么办?如何解决?解决方法:1、项目入口文件index.php

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

css怎么适配不同分辨率屏幕?

这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。我们可以使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

jq css怎么用?

jqcss怎么用?jquery中,css()方法用来返回或设置匹配的元素的一个或多个样式属性。语法:$(selector).css(name) $(selector).css(name,value)