手機百度瀏覽器底部fixed懸浮框屏蔽,出來一會自動消失了

有的時候經常需要在頁面的底部做一個懸浮框,進行電話諮詢什麼,留電什麼的,但是發現在手機百度瀏覽器中,進去頁面一會就消失了。
這個是因爲,百度瀏覽器把他看成廣告了,自動屏蔽了。
對於使用 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>
  1. 方式 使用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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章