fixed元素遮挡下面元素的问题

元素遮挡下面元素的问题"/>

fixed元素遮挡下面元素的问题

网页实际开发中会遇到fixed置顶元素，有时需要由后端决定是否显示。
所以在布局上注意fixed元素遮挡问题。

具体解决办法如下：

1、通过添加父元素实现不遮挡

html

<div id="fixed_wrap"><div id="fixed">fixed</div>
</div>
<div id="under">under</div>

css

#fixed_wrap {height: 150px;background-color: aqua;
}
#fixed {position: fixed;
}
#under {height: 200px;
}

说明：在fixed元素外包裹一个wrap元素，然后给wrap元素设置高度/背景色（fixed元素不设置高度）

2、通过背景透明页面滚动实现

这种情况一般是在不能修改dom元素，并且fixed元素下方是图片的情况下，可以先将fixed元素背景设置为透明色（下方是图片，不算遮挡），在滚动时添加class为fixed元素添加背景色。

js

$(document).scroll(function(){var distance = $('.fix').offset().top;if(distance > 100 ) {$('.fix').addClass('show_back');} else {$('.fix').removeClass('show_back');}
});