解決iframe中fixed失效的問題
阿新 • • 發佈：2018-12-06
1.開始先說幾句廢話，剛開始是因為公司有一個老專案需要新增一個底部的導航欄，這個導航欄需要一直懸掛在底部，剛開始以為很容易，結果接觸那個專案的時候才知道那個專案是iframe裡面巢狀iframe,非常噁心。結果就有了這個問題，好了廢話不多少了，直接上程式碼，因為公司的專案程式碼太雜，所以我自己寫了一個案例供大家參考。
1.首先說一下案例效果，我會在a頁面中巢狀b頁面，讓b頁面中的導商條固定定位在a頁面的底部
2.我先說一下我的實現思路，首先既然fixed失效的話，那我們可以去模擬固定定位。那麼具體如何去模擬我們考慮一下固定定位的特性，那就是不隨滾動條滾動，那麼我可以想到我們可以獲取滾動條的垂直高度， 因為是iframe頁面所以我們拿到他父級頁面的滾動條高度也就是$(parent.window).scrollTop()，這樣的話他就會不隨滾動條去滾動。但是他會一直在他父級元素的頂部，那麼我們要解決這個問題。這時候我想到了用margin-top,但是margin-top給多少呢，首先我們可以確定的是margin-top肯定不是死值，他一定是動態的，因為如果設定死值的話，一旦視窗大小發生變動就出出現位置發生變化。那麼如何去動態的去賦值就是我們要解決的問題，我的辦法是拿到他父級頁面視窗的高度$(window.parent).height() -174，至於為什麼要減去174呢，因為iframe頁面上有一個導航條所以要減去導航條的高度。這樣就可以動態的去給margin-top賦值，還有最重要的一點是我要要監聽瀏覽器視窗的高度，這時候要用到resize事件，好了程式碼都在下面，大家可以複製一下放到編輯器中看一下效果。
3.這是a頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .top{ width: 100%; height: 100px; background-color: red; margin-bottom: 20px; } .main{ width: 100%; } </style> </head> <body> <div class="top"></div> <div class="main"> <iframe src="two.html" width="100%" height="2000px"scrolling="no"></iframe> </div> </body> </html>
4.這是b頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.content {
width: 100%;
background: yellow;
/*position: relative;*/
/*transform: none*/
}
.content li {
width: 100%;
height: 300px;
}
.fix {
width: 100%;
height: 46px;
background: black;
position: fixed;
bottom: 0;
text-align: center;
line-height: 46px;
color: white;
}
</style>
</head>
<body>
<div class="content">
<ul>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
</ul>
<div class="fix">
asdasd
</div>
</div>
<script type="text/javascript">
scrollFixed()
$(parent.window).resize(function() {
scrollFixed()
})
function scrollFixed (){
$(".fix").css({
top : $(parent.window).scrollTop(),
marginTop: $(window.parent).height() - 174
});
$(parent.window).scroll(function() {
$(".fix").css({
top : $(parent.window).scrollTop(),
marginTop: $(window.parent).height() -174
});
});
}
</script>
</body>
</html>5.效果圖
