jQuery粘頁腳似乎不粘
[英]jQuery sticky footer doesn't appear to be sticking
問題描述
我在這里有一個投資組合網站：
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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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"><< 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&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&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&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&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&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&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 個解決方案
解決方案1
0 2014-12-02 12:42:08
我可以要求您檢查客戶端瀏覽器的控制台嗎？ 如我所見，您的stickyfooter.js出現一些錯誤。 也許解決此錯誤可以為您提供更多幫助。
SCRIPT5009: 'pace' is undefined
mrliger.com, line 13 character 1
SCRIPT5007: Object expected
stickyfooter.js, line 2 character 1
粘頁腳不粘
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.