javascript - 导航栏不会在 iFrame 中保持静态

Question

我有一个名为 facethemusic.co 的网站，欢迎您访问。 这是一个音乐流媒体服务和社交音乐网络，所以我需要一个静态音乐播放器，它不会在每次单击链接时自动刷新。所以我使用 iFrame，但是当我滚动时，导航栏不会固定在移动版本的顶部。在桌面版页面向下滚动 2/3 后，导航栏消失而不是静止的，有人知道如何解决这个问题吗？

附言在桌面上调整浏览器大小时，移动版本“似乎”可以工作，但在我的 iPhone 上运行时，导航栏不会保持静止。

亲切的问候，

.navbar-custom {
	/* 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 {
  	color:#eeeeee;
}
.navbar-custom .navbar-toggle {
  	background-color:white;
}
.navbar-custom .icon-bar {
  	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">
	<div class="form-group">
	<input type="text" class="form-control" placeholder="Search here" />
	</div>
             <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
	</form>
        </div>
    </div>
  </div>
</div>

Answer 1

它会解决问题，你可以试试这个。

请在 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%;
}