导航条不会在iFrame内保持静态

Navbar won't stay static inside iFrame

本文关键字：静态 iFrame 导航      更新时间：2023-09-26

我有一个叫facethemusic的网站。欢迎你来参观。这是一个音乐流媒体服务和社交音乐网络，所以我需要一个静态音乐播放器，它不会自动刷新每次点击链接。所以我使用iFrames，但是当我滚动导航条不会固定在移动版本的顶部。在桌面版本中，滚动到页面的三分之二后，导航条消失了，而不是静态的，有人知道如何解决这个问题吗?

注:手机版在调整桌面浏览器大小时"似乎"可以工作，但在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>

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

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

只需在http://facethemusic.co/source.html的body{——here——}css中添加"overflow-y: scroll;" 

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

希望它能解决这个问题

相关文章：