Question

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

P.S。在桌面上调整浏览器大小时，移动版本“似乎”可以正常工作，但在运行时，导航栏在我的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%;
}

Answer 2

只需添加＆＃34; overflow-y：滚动;＆＃34;在http://facethemusic.co/source.html

的正文{ - here - } css中

CollapsingToolbar

希望它能解决问题

Navbar不会在iFrame中保持静态

2 个答案: