完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

问题描述

 h5活动页面底部有个悬浮图片按钮，使用fixed悬浮定位在底部，但是在安卓端的百度浏览器下打开，却发现该图片一闪而过，在百度浏览器中消失不见。 

原因 

这是由于百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）。

代码实现

主要用的一个空标签,就按钮图片作为背景，放在伪元素中并添加到到页面上，这样就完美解决了百度浏览器屏蔽fixed悬浮元素的问题。

html：

<a href="javascript:void(0);" class="foot" onclick="href()">	
</a>

css：

<style>
.foot{
   display: block;
   position: fixed;
   max-width: 640px;
   width: 100%;
   bottom: 0;
}
.foot::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 1.05rem;
    background-size: cover;
    background-image: url('./images/chat/foot.png')
	}
</style>

当然也可以使用js来实现布局问题，当页面完全渲染完成后，在给元素添加fixed的属性(之前让该元素隐藏)。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4203