您的位置:首页 > 其它

position:fixed ,锚点定位不准确的问题

2014-11-30 14:15 190 查看
解决方案:

1. 参照 stackoverflow 的做法,在主体内容前加一个暗锚

将锚点进行偏移,并隐藏占位:
.target-fix {
position: relative;
top: -44px; // 偏移值
display: block;
height: 0;
overflow: hidden;}


2. 对于现代浏览器如果支持css的:target声明,可以这么设置:
article.a-post:target{
padding-top:44px;}


对于IE这等落后的浏览器是不支持的.

3. 可以使用js去调整scroll,比如使用jQuery:
$(function(){  if(location.hash){
var target = $(location.hash);
if(target.length==1){
var top = target.offset().top-44;
if(top > 0){
$('html,body').animate({scrollTop:top}, 1000);
}
}
}
});


4. 可以使用jquery-hashchange:

https://github.com/cowboy/jquery-hash...

绑定window.onhashchange事件:
$(function(){        /* 绑定事件*/
$(window).hashchange(function(){
var target = $(location.hash);
if(target.length==1){
var top = target.offset().top-44;
if(top > 0){
$('html,body').animate({scrollTop:top}, 1000);
}
}
});        /* 触发事件 */
$(window).hashchange();
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: