知识共享许可协议

position:sticky实现iOS6+下的粘性布局

用户总是希望在窗口明显的地方方便找到自己想要的操作项,例如停留在浏览器窗口顶端的菜单栏,筛选栏等。所以我们会把用户最常用到或者我们希望用户注意到的内容一直展现在窗口的可视区域,让用户能够一眼就看到。这当中常需要用到一种页面滚动然后元素固定在窗口的某个位置的布局方式(下面简称粘性布局)。

要实现这种粘性布局,我们常常都是通过js来模拟,实现方案是通过js监听window的scroll事件,当需要固定的元素滚动到窗口顶部时,把元素的position属性设置为fixed,否则,取消fixed,简单的js代码如下:

1
2
3
4
5
6
var nav = document.querySelector('.nav');
var navOffsetY = nav.offsetTop;
function onScroll(e) {
window.scrollY >= navOffsetY ? nav.classList.add('fixed') : nav.classList.remove('fixed');
}
window.addEventListener('scroll', onScroll);

上面的实现在桌面浏览器的表现还是挺好的,但是在移动端浏览器上粘顶的效果就显得不那么平滑了。

阅读全部

1px on retina

一直以来我们实现边框的方法都是设置 border: 1px solid #ccc,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同:1px可能会被渲染成1.5px, 2px, 2.5px, 3px....,在用户体验上略差,所以现在要解决的问题就是在retina屏幕实现1px边框。

如果你去google类似问题,诚然会找到所谓的”答案“,然后很开森的用到项目中了。运气好的话,Yeah成功模拟1px了,运气不好了可能遇到各种奇葩的表现让你抓狂。

这篇文章总结了目前常用的模拟1px的方法,并分析各个方法的利弊。

阅读全部

Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

阅读全部