2016-04-05 4 views
0

Следующий код не работает в mozilla firefox хорошо работает в chrome Используемая ОС Linux В коде я изменил цвет верхней панели и содержимое панели задач после определенной прокрутки, также есть плавающая кнопка контакта с влево, которые должны быть показаны после определенного сНу элемента передается .THANKS заранееJavascript не работает в mozilla firefox?

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> 

+1

Любые ошибки в консоли? – Rayon

+0

Нет ошибок в консоли –

+0

также попытался использовать firebug –

ответ

0

Похоже есть что-то не так с если/другое заявления, как это событие на самом деле обожженных. Если вы добавите console.debug("scrollevent fired"); в начале функции и используйте firebug для отображения журнала консоли, вы заметите, что вывод фактически записывается на выход (check the JSFiddle).

К сожалению, я не могу отлаживать код, как я не могу найти пару элементов с заданными идентификаторами в вашем примере кода ...

+0

@Pazcasl которого идентификатора Ур не получает –

+0

Если вы проверяете JSFiddle, консольный вывод говорит, что не может найти элемент с идентификатором ' aboutus ', id' mainlogo2 'и id' home ' –

+0

Я все еще пропускаю элемент с id' aboutus ' –

Смежные вопросы