Navbar不會在iFrame中保持靜態

我有一個名爲facethemusic.co的網站，歡迎您訪問。這是一個音樂流媒體服務和社交音樂網絡，所以我需要一個靜態音樂播放器，每次點擊鏈接時都不會自動刷新。所以我使用iFrames，但是當我滾動導航欄不會保持固定在移動版本的頂部。在滾動瀏覽器桌面版本頁面的2/3後，導航欄消失而不是靜止，有人知道如何解決這個問題嗎？Navbar不會在iFrame中保持靜態

P.S.在桌面上調整瀏覽器大小時，移動版本「顯示」可以正常工作，但在運行時，導航欄不會保持靜態。

親切的問候，

.navbar-custom { 
 
\t /* background-color:#297A52; nice green */ 
 
    
 
    background-color:#48D1CC; 
 
    border-radius:0; 
 
    cursor:url(../img/cursor.gif), pointer; 
 
} 
 
    
 
.navbar-custom .navbar-nav > li > a { 
 
color:#ffffff; 
 
padding-left:20px; 
 
padding-right:20px; 
 
} 
 

 
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { 
 
    color: #ffffff; 
 
    background-color:transparent; 
 
    cursor:url(../img/cursor.gif), pointer; 
 
} 
 
     
 
.navbar-custom .navbar-nav > li a:hover { 
 
    text-decoration: none; 
 
    background-color:#4DDBB8; /*purple: #660066 */ 
 
    cursor: url(../img/cursor.gif), pointer; 
 

 
} 
 
    
 
.nav > li > a:focus { 
 
    text-decoration: none; 
 
    background-color: #000000; 
 
}  
 

 
.navbar-custom .navbar-brand { 
 
    \t color:#eeeeee; 
 
} 
 
.navbar-custom .navbar-toggle { 
 
    \t background-color:white; 
 
} 
 
.navbar-custom .icon-bar { 
 
    \t background-color:#90C3D4; 
 
}

<div class="container-fluid"> 
 
     
 
<div class="navbar navbar-custom navbar-fixed-top" id="main-navbar" > 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <a href="" class="navbar-brand" data-toggle="tooltip" title="Face the Revolution!" data-placement="bottom" >FaceTheMusic</a> 
 

 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="sr-only">Toggle navigation</span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse navHeaderCollapse" aria-expanded="false"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="source.html">Home</a> </li> 
 
       <li><a href="About.html">About</a></li> 
 
       <li><a href="">Login</a></li> 
 
       <li><a href="">Search</a></li> 
 
       <li><a href="">Upload</a></li> 
 
       
 
      </ul> 
 
     <form action="" class="navbar-form navbar-right" role="search"> 
 
\t <div class="form-group"> 
 
\t <input type="text" class="form-control" placeholder="Search here" /> 
 
\t </div> 
 
      <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button> 
 
\t </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-05 Abdullah Haider

，iFrame是過時的。 – APAD1

謝謝，但無論如何，它使iframe內工作？例如使用javascript/jquery創建自定義靜態導航欄選項？ –

我已經做了一些關於谷歌和iFrames的研究，似乎並沒有過時，尤其是對於像我這樣的人，他們不想走下AJAX路線，並希望堅持HTML/5他們能。 –

只需添加「溢出-Y：滾動;」在身體{ - 在這裏 - }的http://facethemusic.co/source.html

body{ 
---other existing attributes--- 
overflow-y: scroll; 
}

CSS希望這將解決您應該使用AJAX這個問題

來源

2015-10-10 17:59:14 CreativePS

這將解決這個問題，你可以試試這個。

請在CSS文件中這一變化

替換此

#mainFrame { 
    cursor: url("img/cursor.gif"), pointer; 
    height: 100%; 
    margin-bottom: 80px; 
    overflow: scroll; 
    width: 100%; 
}

本

#mainFrame { 
    cursor: url("img/cursor.gif"), pointer; 
    height: 99%; 
    overflow: hidden; 
    width: 100%; 
}

來源

2015-10-05 19:33:39 CreativePS

它適用於靜態桌面版本，但在移動版本中，當我滾動它時，它仍然在滾動。 –

可以這樣做嗎？ –

如果您將iframe的高度更改爲98％，它將解決移動設備中的問題太。請嘗試。 – CreativePS

Navbar不會在iFrame中保持靜態

回答

相關問題