粘滯頁腳創建無限滾動

正是標題所說的！我創建的粘性頁腳插件（來自您所有優秀人物的一些慷慨援助）運行良好，但它不斷創建這種奇怪的infini滾動效果。粘滯頁腳創建無限滾動

不知道這裏發生了什麼？我很難過，儘管我懷疑jQuery中有些東西我沒有足夠的知識來解決。

感謝您提供任何幫助！

的Javascript：

jQuery(document).ready(function($){ 

$(window).bind("load", function() { 

     var footerHeight = 0, footerTop = 0, $footer = $("#footer"); 
     positionFooter(); 
     function positionFooter() { 

      footerHeight = $footer.height(); 
      footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; 

      if(($(document.body).height()+footerHeight) < $(window).height()) { 
        $footer.css({ position: "absolute"}).animate({ top: footerTop },-1) 
       } else { 
        $footer.css({ position: "static"}) 
       } 
      } 

     $(window).scroll(positionFooter).resize(positionFooter) 

    }); 
});

CSS：

#footer { 
    clear: both; 
    height: 80px; 
    padding: 0 0; 
    background: #315B71; 
    border-top: 8px solid rgb(29, 71, 93); 
    width: 100%; 
}

這裏的顯示問題小提琴：http://jsfiddle.net/ZxupR/

來源

2013-08-23 LukePatrick

我在Safari上看不到任何滾動問題？ –

設置top值時，你忘了佔8像素border-top風格。更改：

footerHeight = $footer.height();

到

footerHeight = $footer.outerHeight();

上線14在jquery.footerstick.js文件。

這使用jQuery的.outerHeight()而不是.height()。

這是工作：http://jsfiddle.net/ZxupR/2/

來源

2013-08-23 00:42:46 Joe

好東西，謝謝你的流暢評論！但是，它在網站上似乎不起作用。我已經在這裏指出了我的jQuery的變化，但我仍然沒有看到一個解決方案。。。這很奇怪，因爲它在小提琴中完美無瑕。對此有何想法？謝謝你在這裏的努力！ – LukePatrick

@LukePatrick - 沒問題。當我加載您的網站時，我也遇到了同樣的問題，只需清除瀏覽器的緩存即可使用。 – Joe

再次感謝您！這確實很好，只有一個問題：在頁面確實比屏幕大的頁面上，看起來它將頁腳視爲「position：fixed;'。任何想法，爲什麼這可能是？就if語句而言，jQuery對我來說看起來很準確。 [鏈接]（http://www.kangabloo.com/work/） – LukePatrick

我打開你的網站的Web開發人員模式裏面克羅默，您的頁腳似乎是絕對位置。每次滾動時都會增加一個增量位置。檢查一下。以及僅在達到某個窗口分辨率時纔會發生的代碼。

來源

2013-08-23 01:22:59

粘滯頁腳創建無限滾動

回答

相關問題