jQuery粘性页脚看起来并不坚持

时间:2014-12-02 12:19:03

标签: jquery html css

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

mrliger.com

当我偶尔更改页面时,页脚会弹出一瞬间而不是粘在页面底部。我已经看过我选择使用这个jQuery粘性页脚的各种粘性页脚:

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

这是我的代码:

<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及其粘性页脚插件都包含在标题中。

1 个答案:

答案 0 :(得分:0)

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

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