Question

我在菜单(This Version).

上使用了熔岩灯效果

一切正常，除了页面加载，另一方面，当页面加载时，熔岩灯对象保持在应该是的位置，但是当你将菜单拖到正确的位置时，它应该是。

我知道这是一个已知的问题，因为自定义字体下载时间或脚本，我对它进行了广泛的研究，并尝试了几乎我找到的解决这个问题的所有解决方案，但没有运气。

我发现的一些解决方案：使用$（window）.load（function（）{，制作延迟来启动熔岩灯功能和其他类似的解决方案，但正如我所说，它们都没有为我工作。

你认为无论如何都要解决这个问题吗？我仍然认为这不应该那么难，但我会在4天后放弃。

可以找到一个工作示例Here

非常感谢您的帮助。

非常感谢

PS：我不知道如何让JSFiddle抱歉。

熔岩灯CSS：

#navlist li.backLava {
border-top: 2px solid #f58220;
text-align: center;
}

可以找到熔岩灯JS文件Here

菜单结构（引导程序菜单）：

<nav class="bottom-header wow animated delay-1" role="navigation">
      <div class="container" id="bi-to-pad">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#My-nav" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
                 <a class="navbar-brand" href="index.html">
                  <img src="assets/img/logo-2.png" class="logo-normal">
                 </a>
            </div>

            <div class="navbar-collapse collapse avbar-expand-lg" id="My-nav" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav navbar-right" id="navlist">

                    <li><a href="#." class="box fo">Home</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services<span class="caret"></span></a>
                         <ul class="dropdown-menu" role="menu">
                          <li class="noLava"><a href="#.">Graphic Design</a></li>
                          <li class="noLava"><a href="#.">Web Design</a></li>
                          <li class="noLava"><a href="#.">SEO</a></li>
                          <li class="noLava"><a href="#.">Printing</a></li>
                         </ul>
                    </li> 

                   <li ><a href="#.">About</a></li>                      
                   <li class="active selectedLava"><a href="#.">Portfolio</a></li>                         
                   <li><a href="#." target="_blank">Blog</a></li> 
                   <li ><a href="#.">Contact</a></li>  
                   <li><a href="#."><i class="fa fa-shopping-cart kechke"></i></a></li>


                </ul>
            </div>

        </div>
     </div>
   </nav>

JQuery Lava Lamp活动元素页面加载错误位置

0 个答案: