Skip to content

Instantly share code, notes, and snippets.

@suncn
Created August 21, 2017 03:36
Show Gist options
  • Save suncn/04b9c4425053c34a86a378c6e5ac0354 to your computer and use it in GitHub Desktop.
Save suncn/04b9c4425053c34a86a378c6e5ac0354 to your computer and use it in GitHub Desktop.
吸顶效果 解决方案 #-webkit-sticky
.position(@propVal: absolute){
position: @propVal;
left: 0;
right: 0;
top: 0;
}
.sticky{
.position(-webkit-sticky);
}
.absolute{
.position;
}
// 应为 position: -webkit-sticky 支持情况不乐观,所以我们需要进行特性检测
function isSupportSticky(){
var propVal = '-webkit-sticky';
$target[0].style.position = propVal;
return propVal == $target[0].style.position;
}
if(isSupportSticky()){
$target.addClass('sticky');
}else{
// 对于不支持 sticky 的 iOS 低版本, 我们可以在做些固顶的过渡动画来兼容
$(window).on('scroll', function(){
if($target.get(0).getBoundingClientRect().top <= 0){
$target.addClass('absolute');
}else{
$target.removeClass('absolute');
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment