jQuery粘性页脚似乎没有粘住_Jquery_Html_Css

jQuery粘性页脚似乎没有粘住

jquery html css

jQuery粘性页脚似乎没有粘住,jquery,html,css,Jquery,Html,Css,我在这里有一个投资组合网站： mrliger.com 当我偶尔更改页面时，页脚会在瞬间弹出，而不是粘在页面底部。我查看了我选择用于此jQuery粘性页脚的各种粘性页脚：下面是我的代码： <body class="lazy" data-original="bgfinal2.jpg"> <link href='http://fonts.googleapis.com/css?family=Quicksand:400' rel='stylesheet' type='text/

我在这里有一个投资组合网站：

mrliger.com

当我偶尔更改页面时，页脚会在瞬间弹出，而不是粘在页面底部。我查看了我选择用于此jQuery粘性页脚的各种粘性页脚：

下面是我的代码：

<body class="lazy" data-original="bgfinal2.jpg">
<link href='http://fonts.googleapis.com/css?family=Quicksand:400' rel='stylesheet'     type='text/css'>

<!--<div class="backgroundimage"></div>-->

<div class="loadingpage"></div>

<div class="header">
<div class="centreheader">
<img src="images/logome.png" class="logo">
<img src="images/mobile-menu-icon.png" class="mobile-menu-icon">
<div class="navhide">
      <ul class="header-options">
            <div class="headercurrent"><div class="arrow-up"></div></div>
            <a><li class="homebutton">Home<div class="icon" style="background-image: url(home.png)"></div></li></a>

            <a><li class="aboutbutton">About<div class="icon" style="background-image: url(about.png)"></div></li></a>

            <a><li class="portfoliobutton">Portfolio<div class="icon" style="background-image: url(portfolio.png)"></div></li></a>

            <a><li class="musicbutton">Music<div class="icon" style="background-image: url(music.png)"></div></li></a>

            <a><li class="contactbutton">Contact<div class="icon" style="background-image: url(contact.png)"></div></li></a>
        </ul>
      </div>    
</div>
<div class="topnavi"></div>

    </div>



<div class="home">
    <div class="homecontainer">

</div>
</div>

<div class="about">
    <div class="aboutcontainer">

<div class="pagetitle">about</div>

<img class="profilepic" src="bg2.jpg" />



<div class="textbreak"></div>

<div class="textbox">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>


</div></div>

<div class="portfolio">
    <div class="portfoliocontainer">


<script>





</script>

<div class="pagetitle bump">portfolio</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/arcade-2.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Arcade</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/live-dealer.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Live Casino</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>


<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/footie-leaderboard.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Arcade</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/vip-2.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - VIP</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<!--
<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/tradefair.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Tradefair</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>
-->

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/your-world.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Your World Recruitment</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/poker-acq.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Poker</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/casino.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Casino</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/roulette.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Casino</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>
<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/arcade.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Arcade</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>



<div>
<div class="portfoliopod portfolioimagezoom lazy" style="background-image:url(http://mrliger.com/images/free-bet-fever.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Arcade (old brand)</div>
</div>
<div class="portfolio-back">&lt;&lt; back</div>
<div class="portfoliotextbox ">

</div>
</div>





<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/blackjack.jpg)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Casino</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<!--

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/tradefair-2.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Tradefair</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

-->

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/vip.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - VIP</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

</div>
</div>

<div>
<div class="portfoliopod portfolioimagezoom" style="background-image:url(http://mrliger.com/images/jan-blues.png)">
<div class="portfoliopodmessagetop">+</div>
<div class="portfoliopodmessage">Betfair - Arcade (old brand)</div>
<div class="portfolio-back">&lt;&lt; back</div>
</div>
<div class="portfoliotextbox ">

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

</div>

<div class="music">
    <div class="musiccontainer">


<div class="pagetitle">music</div>

<div class="textbox">In my spare time I like to produce electronic music. Growing up I have always had a strong musical background and have played a range of instruments. My influences over the past few years have mainly come from the Deep house scene and I am always looking out for new artists and genres coming out. If you're interested have a listen to some of my latest creations below</div>

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/161223881&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
<div class="textbreakmusic"></div>

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137200377&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
<div class="textbreakmusic"></div>

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/133553657&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>





</div></div>

<div class="contact">
    <div class="contactcontainer">

<div class="pagetitle">contact</div>

<div class="textbox">If you like what you see (and hear) feel free to get in touch with me and discuss any future projects we could work together on</div>

<div class="mycontactform">



<form name="myForm" action="form_process.php" method="POST"> 



<label for="field_name">Name:</label> 

<input type="text" id="field_name" name="sender_name"> 

<br /><br />   

<label for="field_email">E-mail:</label> 

<input type="text" id="field_email" name="sender_email"> 

<br /><br />   

<label for="field_phone">Phone:</label> 

<input type="text" id="field_phone" name="sender_phone"> 

<br /><br />   

<label class="bumpleft"for="field_message">Message:</label> 



<textarea id="field_message" name="sender_message"></textarea> 

<br /><br /> 
<br /><br />  


 <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfU1P0SAAAAALHISZktklS0s_WdRhdq2r6QvU10"></script>

    <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfU1P0SAAAAALHISZktklS0s_WdRhdq2r6QvU10" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>

<input class="sendbutton" type="submit" name="send_message" value="Send"> 

</form>

</div>






</div></div>

<div class="footer" id="footer"></div>





</body>

你知道为什么它不粘吗？jQuery及其粘性页脚插件都包含在页眉中。

我可以要求您检查客户端浏览器的控制台吗？正如我看到的，你的stickyfooter.js有一些错误。也许解决这个错误可以帮助你更多

SCRIPT5009: 'pace' is undefined 
mrliger.com, line 13 character 1
SCRIPT5007: Object expected 
stickyfooter.js, line 2 character 1

那么，你的意思是在某些情况下，它根本不粘到底部，或者在加载页面时，它会很快从上到下“跳转”吗？因此，基本上，当点击页面的另一部分时，例如从音乐到公文包，它会在页面顶部闪烁几秒钟。可能需要你几次尝试来复制这个问题……但它最终会找到底部吗？这听起来像是没有先应用CSS，然后再将其加载到元素上。因此，加载CSS并将其应用于元素需要时间，我的意思是。是的，它最终会这样做，我试图阻止它在顶部出现一瞬间，因为它看起来不太好，而且非常引人注目。我假设jQuery粘性页脚将始终保持在底部，不管是什么移动jQuery.noConflict可能是这样的，如果第二行失败，这是否意味着尚未定义jQuery中的$？这意味着您的库未导入。抱歉，您是否可以在此基础上展开，请说明您已删除页脚插件。另外，正如@dm4web所建议的，添加id=footer。请让我知道这件事已经完成了。我将尝试找出jQuery库无法加载的原因。为什么需要pace.start。我看不出你的页面的速度。而且，它在速度上也有误差！