> css教程 > css >

手机百度浏览器底部fixed悬浮框屏蔽,出来一会自动消失了

来源:网络 文章列表 2021-05-30 8
有的时候经常需要在页面的底部做一个悬浮框,进行电话咨询什么,留电什么的,但是发现在手机百度浏览器中,进去页面一会就消失了。

有的时候经常需要在页面的底部做一个悬浮框,进行电话咨询什么,留电什么的,但是发现在手机百度浏览器中,进去页面一会就消失了。
这个是因为,百度浏览器把他看成广告了,自动屏蔽了。
对于使用 display:fixed;形式的一般都是看作广告
好像还是对于 低于50px的高度都是被看作是广告的
1.你可以使用伪类生成器 ,设置一个空的元素,然后使用伪类生成添加一个新的元素 将点击事件也绑定在 父元素上

<a href="javascript:;" class="foot"></a>
<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%;
    background-size: cover;
    background-image: url('demo.png')
	}
</style>
<script>
	$('.foot').click(function(){console.log('hello world')});
</script>


2.方式 使用js控制元素的显示
让页面渲染完成之后 是同 css的 display 再让他 fixed
有的说这个可以 我试试了 好像不太行的样子 不知道说行的童鞋是怎么搞得 可能是我整错了

3.第三种,是我自己尝试着搞得,就是使用position absolute 进行底部定位,好像百度对于大于50px的fixed元素就不会屏蔽了,就使用了 一个定于屏幕上方的 100% 宽高的元素 在其内部 在定位一个底部的元素 absolute 就不会 可以试试看

.container{
	width: 100%;
	height: 7000px;
	border: 1px solid #f00;
	position: relative;
}
.demo{
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
}
.xuanfu{
	width: 100%;
	height: 100px;
	background-color: #F1B0B7;
	position: absolute;
	left: 0;
	bottom: 0;
}
<div class="container"></div>
<div class="demo">
	<div class="xuanfu"></div>
</div>

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接