Javascript 无法在 mozilla firefox 中工作?
Javascript not working in mozilla firefox?
以下代码在 mozilla firefox 中不起作用
在 chrome 中运行良好
OS 使用的是 linux
在代码中,我一直在更改顶部栏颜色和特定滚动后任务栏的内容,左侧还有一个浮动联系按钮,需要在特定 div 元素通过后显示。提前致谢
window.onscroll = function (oEvent) { //onscrool
var mydivpos = document.getElementById("aboutus").offsetTop;
var mydivpos2 = document.getElementById("mainlogo2").offsetTop;
var mydivpos3 = document.getElementById("home").offsetTop;
var scrollPos = document.getElementsByTagName("body")[0].scrollTop;
if(scrollPos >= mydivpos)
{
document.getElementById("noshow").className = ""; //changin the classname
}
else {
document.getElementById("noshow").className = "hidden"; //the topbar which is need to show
}
if(scrollPos >= mydivpos2)
{
document.getElementById("topbarwithlogo").className ="";
document.getElementById("topbar").className = "hidden";
}
if(scrollPos == 0)
{
document.getElementById("topbar").className ="";
document.getElementById("topbarwithlogo").className = "hidden";
}
};
//HTML
<div id="noshow" class="hidden">
<div class="appiphycontact">
<ul>
<img src="logos/facebook.png" class="img-responsive">
<img src="logos/google+.png" class="img-responsive">
<img src="logos/Linkedin.png" class="img-responsive">
<img src="logos/twitter.png" class="img-responsive">
</ul>
</div>
<div class="container-fluid" id="topbar">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-ar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse">
<ul class="nav navbar-nav" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li>
Our Clients
</li>
</ul>
</div>
</nav>
<div class="container-fluid hidden" id="topbarwithlogo">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li id="li">
Our Clients
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="home">
<div class="tinted-image">
<div class="container">
<div class="col-md-12" id="mainlogo2">
<img src="images/someimage.png" class="img-responsive" alt="">
</div>
</div>
<div class="container-fluid">
<div class="maincontent">
<div id="maincontent"><h1>.</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid aboutus" id="aboutus">
<div class="container">
<h2>About Us</h2>
<p class="aboutusheader2">LEADER IN IT SERVICES, DIGITAL AND BUSINESS SOLUTIONS</p>
<div class="row">
<div class="col-md-6 imagediv ">
<p id="aboutusinfo" >Some information.</p>
</div>
<div class="col-md-6 imagediv">
<div class="aboutusimg">
<ul>
<img src="images/someimage.png" class="img-responsive" alt="">
<img src="images/someimage.png" class="img-responsive " alt="">
<img src="images/someimage.png" class="img-responsive" alt="">
</ul>
</div>
</div>
</div>
</div>
似乎 if/else 语句有问题,因为事件实际上已触发。如果你在函数的开头添加console.debug("scrollevent fired");
并使用firebug来显示控制台日志,你会注意到输出实际上写入了输出(check the JSFiddle).
很遗憾,我无法调试您的代码,因为我在您的代码示例中找不到具有给定 ID 的几个元素...
以下代码在 mozilla firefox 中不起作用 在 chrome 中运行良好 OS 使用的是 linux 在代码中,我一直在更改顶部栏颜色和特定滚动后任务栏的内容,左侧还有一个浮动联系按钮,需要在特定 div 元素通过后显示。提前致谢
window.onscroll = function (oEvent) { //onscrool
var mydivpos = document.getElementById("aboutus").offsetTop;
var mydivpos2 = document.getElementById("mainlogo2").offsetTop;
var mydivpos3 = document.getElementById("home").offsetTop;
var scrollPos = document.getElementsByTagName("body")[0].scrollTop;
if(scrollPos >= mydivpos)
{
document.getElementById("noshow").className = ""; //changin the classname
}
else {
document.getElementById("noshow").className = "hidden"; //the topbar which is need to show
}
if(scrollPos >= mydivpos2)
{
document.getElementById("topbarwithlogo").className ="";
document.getElementById("topbar").className = "hidden";
}
if(scrollPos == 0)
{
document.getElementById("topbar").className ="";
document.getElementById("topbarwithlogo").className = "hidden";
}
};
//HTML
<div id="noshow" class="hidden">
<div class="appiphycontact">
<ul>
<img src="logos/facebook.png" class="img-responsive">
<img src="logos/google+.png" class="img-responsive">
<img src="logos/Linkedin.png" class="img-responsive">
<img src="logos/twitter.png" class="img-responsive">
</ul>
</div>
<div class="container-fluid" id="topbar">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-ar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse">
<ul class="nav navbar-nav" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li>
Our Clients
</li>
</ul>
</div>
</nav>
<div class="container-fluid hidden" id="topbarwithlogo">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li id="li">
Our Clients
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="home">
<div class="tinted-image">
<div class="container">
<div class="col-md-12" id="mainlogo2">
<img src="images/someimage.png" class="img-responsive" alt="">
</div>
</div>
<div class="container-fluid">
<div class="maincontent">
<div id="maincontent"><h1>.</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid aboutus" id="aboutus">
<div class="container">
<h2>About Us</h2>
<p class="aboutusheader2">LEADER IN IT SERVICES, DIGITAL AND BUSINESS SOLUTIONS</p>
<div class="row">
<div class="col-md-6 imagediv ">
<p id="aboutusinfo" >Some information.</p>
</div>
<div class="col-md-6 imagediv">
<div class="aboutusimg">
<ul>
<img src="images/someimage.png" class="img-responsive" alt="">
<img src="images/someimage.png" class="img-responsive " alt="">
<img src="images/someimage.png" class="img-responsive" alt="">
</ul>
</div>
</div>
</div>
</div>
似乎 if/else 语句有问题,因为事件实际上已触发。如果你在函数的开头添加console.debug("scrollevent fired");
并使用firebug来显示控制台日志,你会注意到输出实际上写入了输出(check the JSFiddle).
很遗憾,我无法调试您的代码,因为我在您的代码示例中找不到具有给定 ID 的几个元素...