sticky的使用

position: sticky粘性定位:是css新增的一个position属性。说是对于IOS的兼容性好一点,对于安卓的兼容性不太好(我自己感觉安卓的兼容性也不错)

于position:fixed的区别:我们都知道常用的几个定位(static、absolute、relative、fixed),如果没有额外的js处理,只要写上,页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理,当页面滚动到相对应的元素上,就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时,定位效果就会消失。

适用场合:一开始不显示,滚动到一定位置需要显示的元素

使用注意事项:

  1. 父元素不能有overflow属性
  2. left、top、right、bottom必须要有一个
  3. 仅在父元素内生效,父元素的高度必须大于sticky元素的高度
  4. ios加前缀-webkit-sticky(考虑到兼容问题)

使用方法:

.sticky{
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    left: 0;
    top: 20px;
}

js检查是否支持sticky属性:

var isSupportSticky = function() {
    var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
    var stickyText = '';
    for (var i = 0; i < prefixTestList.length; i++) {
        stickyText += 'position:' + prefixTestList[i] + 'sticky;';
    }
    // 创建一个dom来检查
    var div = document.createElement('div');
    div.style.cssText = stickyText;
    document.body.appendChild(div);
    var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
    document.body.removeChild(div);
    div = null;
    return isSupport;
};

 

转载于:https://www.cnblogs.com/zsj-02-14/p/11251773.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值