position的sticky这个属性一般用于导航条,因为他在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。基本就是自适应的导航条。

  但是其兼容性在ios上很流畅,但是再安卓上,安卓4.4.4以下全军覆没,莫名其妙在安卓7上也跪了。可能你会想,既然兼容那么差,为什么还要用。在微信浏览器上,滚动并不是即时的,它需要等滚动完,scroll事件才触发,这样通过js计算距离屏幕顶端距离,然后fixed和relative定位切换,并不流畅,会卡顿。而sticky却非常流畅,不能因为一部分用户的兼容不了,放弃使用这个属性。

  那么只能通过判断当前设备是否支持sticky这个属性,如果不支持则替换成fixed和relative定位组合;

  以下是demo代码

  

  let elem = window.document.documentElement;
let w = elem.clientWidth;
let h2 = (w/16*9);//使用sticky定位的顶端是一个16比9的div
function isSupportSticky() {//判断是否支持sticky
var prefixTestList = ['', '-webkit-'];
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;
}
let fixBottomBar = function(){
var topbarTop = h2;
window.onscroll = function(e){
let winTop = document.body.scrollTop;
if(winTop > topbarTop){
_this.navClass['nav-fixed'] = true; //vue动态添加class写法
// topbar.setAttribute('class','nav nav-fixed'); //原生js写法
}else{
_this.navClass['nav-fixed'] = false;
// topbar.setAttribute('class','nav');
}
} }
!isSupportSticky() && fixBottomBar();

position sticky的兼容的更多相关文章

  1. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  2. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  3. 粘性固定 position:sticky

    在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...

  4. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  5. position:sticky用法

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  6. CSS3的position:sticky介绍

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  7. position:sticky

    使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...

  8. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  9. position:sticky粘性布局

    新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...

随机推荐

  1. 【sping揭秘】7、国际化信息支持

    Spring提供messagesource接口,来进行国际化事务处理 Applicationcontext会优先找一个名为messageSouce的messageSource接口实现bean,如果找不 ...

  2. Spark程序提交到Yarn集群时所遇异常

    Exception 1:当我们将任务提交给Spark Yarn集群时,大多会出现以下异常,如下: 14/08/09 11:45:32 WARN component.AbstractLifeCycle: ...

  3. Install vsftpd on centos

    安装vsftpd程序. sudo yum -y install vsftpd 启动ftp服务. sudo service vsftp start 添加ftp用户,并设置密码. sudo useradd ...

  4. JavaSE-异常

    1.try catch finally 异常捕获 public class ExceptionTest { public static void main(String[] args) { int a ...

  5. ASP.NET Core 1.0 中使用 Log 日志配置

    https://github.com/aspnet/Logging https://docs.asp.net/en/latest/fundamentals/logging.html ASP.NET C ...

  6. IdentityServer-Protecting an API using Client Credentials

    使用客户凭证保护API 这篇快速开始将展示使用IdentityServer保护APIs的最基本使用场景. 在此场景中我们将定义一个API和一个要访问此API的客户端. 客户端将向IdentitySer ...

  7. Python -- 多媒体编程 -- 音乐播放

    使用win32库的WMPlayer.OCX开发一个简易的音乐播放器 import sys from PyQt4 import QtGui, QtCore from win32com.client im ...

  8. 理解 Generator 的执行

    Generator & yield 开局官宣:sec-generatoryield,这是对yield的介绍. 同样巴拉巴拉列了9条,将以上链接中的说明简化成3条: 1. 在GeneratorF ...

  9. 【转载】CentOS中crontab定时计划任务的使用

    转载自:http://blog.csdn.net/testcs_dn/article/details/48780971 概述 利用“任务计划”,可以将任何脚本.程序或文档安排在某个最方便的时间运行.通 ...

  10. Java中的简单工厂模式(转)

    Java中的简单工厂模式 举两个例子以快速明白Java中的简单工厂模式: 女娲抟土造人话说:“天地开辟,未有人民,女娲抟土为人.”女娲需要用土造出一个个的人,但在女娲造出人之前,人的概念只存在于女娲的 ...