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

    技术2022-07-10  231

    有的时候经常需要在页面的底部做一个悬浮框,进行电话咨询什么,留电什么的,但是发现在手机百度浏览器中,进去页面一会就消失了。 这个是因为,百度浏览器把他看成广告了,自动屏蔽了。 对于使用 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> 方式 使用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>
    Processed: 0.023, SQL: 9