【问题标题】:Javascript not working in mozilla firefox?Javascript 在 Mozilla Firefox 中不起作用?
【发布时间】:2016-04-07 14:36:42
【问题描述】:

以下代码在 mozilla firefox 中不起作用 在 chrome 中运行良好 使用的操作系统是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>

【问题讨论】:

  • 控制台有错误吗?
  • 不,控制台没有错误
  • 也试过萤火虫
  • 因为上面的代码在 chrome 中运行良好
  • “不工作”并没有告诉我们太多。你看到了什么? HTML 是什么?

标签: javascript firefox mozilla


【解决方案1】:

似乎 if/else 语句有问题,因为事件实际上被触发了。如果你在函数的开头加上console.debug("scrollevent fired");,并使用firebug显示控制台日志,你会注意到输出实际上是写入了输出(check the JSFiddle)。

很遗憾,我无法调试您的代码,因为我在您的代码示例中找不到具有给定 ID 的几个元素...

【讨论】:

  • @Pazcasl which id 你没有得到
  • 如果您检查 JSFiddle,控制台输出显示它找不到 id 为“aboutus”、id 为“mainlogo2”和 id 为“home”的元素
  • 我仍然缺少 id 为“aboutus”的元素
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-19
  • 1970-01-01
  • 1970-01-01
  • 2018-10-18
  • 1970-01-01
  • 1970-01-01
  • 2018-07-21
相关资源
最近更新 更多