The following code is not working in mozilla firefox works well in chrome OS used is linux In the code i have been changing the topbar color and the contents of the taskbar after certain scroll also there is a floating contact button to the left which need to be shown after certain div element is passed .Thanks in advance
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>
Seems like there is something wrong with the if/else statements as the event is actually fired. If you add console.debug("scrollevent fired");
at the beginning of the function and use firebug to show the console log, you will notice that the output is actually written to the output (check the JSFiddle).
Unfortunately I cannot debug your code as I cannot find a couple of elements with the given Id's in your code sample...