固定div在窗口底部的更乾淨的方式，但保持在頁腳的上方並在頁面寬度上觸發

我創建了一個粘滯條以停留在窗口的底部。當用戶向下滾動到頁面底部時，相同的欄將保持固定，直到頁腳顯示，然後臨時刪除其固定位置，以保持頁腳位於頁面上方，直到用戶向後滾動並再次保持固定。固定div在窗口底部的更乾淨的方式，但保持在頁腳的上方並在頁面寬度上觸發

我只想在頁面寬度超過680px時發生。下面的任何東西都會將粘性欄保留在默認位置（CSS：position：inherit）。

這是網站：http://ttd.firefly-digital.co.uk

它按預期工作。但是，當我在Mac上進行Chrome測試時，它觸發了我的CPU粉絲，這表明這種效率不高，而且我的JavaScript技能有限，想知道是否有更簡潔的方法來實現這一目標？

這是當前的js代碼：

$(window).scroll(function(event) { 

    var scroll = $(this).scrollTop(); 
    var docHeight = $(document).height(); 
    var windowHeight = $(window).height(); 
    var footerHeight = $('.footer').height(); 

    if(docHeight - (windowHeight + scroll) < footerHeight) { 
     $('.contact-bar').css({ 
      bottom: footerHeight - (docHeight - (windowHeight + scroll)) 
     }); 
    } else { 
     $('.contact-bar').css({ 
      bottom: 0 
     }); 
    } 

}); 

var windowWidth = $(window).width(); 

$(window).resize(function() { 
    windowWidth = $(window).width(); 

    if(windowWidth > 680) { 
     $('.contact-bar').css({ 
      position: "fixed" 
     }); 
    } else { 
     $('.contact-bar').css({ 
      position: "inherit" 
     }); 
    } 

});

CSS代碼

.contact-bar { 
    background: $contact-bar; 
    width: 100%; 
    height: 40px; 
    text-align: center; 
    position: fixed; 
    bottom: 0; 
    z-index: 10; 
}

來源

2015-01-16 Jack Barham

與論壇網站不同，我們不使用「謝謝」或「任何幫助表示讚賞」，或在[so]上簽名。請參閱「[應該'嗨'，'謝謝'，標語和致敬從帖子中刪除？]（http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be ），這是「預先感謝」，而不是「感謝先進」 –

哇，對這裏的事情非常挑剔，不用擔心，我會保持自己的禮貌，並感謝你的語法我的誦讀困難是非常令人沮喪的，我嘗試了，但有時它會滑倒 –

請點擊我所包含的鏈接，您可能會更好地理解爲什麼我們對「禮貌」有「挑剔」 –

您可以反向做。使其無需固定位置，即可在沒有任何JavaScript（包括媒體查詢）的情況下位於頁腳之上。比添加一個固定的類與固定和底部：0將相應地添加。像這樣：

.contact-bar.fixed { position:fixed; bottom:0; }

的的jquery代碼，將觸發此，如下：

$(window).scroll(function (event) { 
    var windowTop = $(this).scrollTop();   
    if (windowTop >= $(".footer").offset().top) { 
     $(".contact-bar").addClass("fixed"); 
     } else { 
     $(".contact-bar").removeClass("fixed"); 
     } 
});

然後添加幾行，上面的代碼將只火如果窗口寬度爲> 680 ，無論是jQuery或純JavaScript。例如與：

if ($(window).width() < 960) { // above function }

請注意我沒有測試過，所以請評論，如果它不起作用。信用：Preventing element from displaying on top of footer when using position:fixed

來源

2015-01-16 16:39:57 Cooleronie

謝謝，在接下來的幾天我會回頭看看我的電腦，我會讓你知道的長矛建議我可以使用其中的一些來清理我的代碼。交給我吧... –

您最好使用類來定位元素，至少要防止jQuery使用適當的選擇器遍歷整個DOM，這在性能上是很好的。

來源

2015-01-16 16:53:23 Nima

固定div在窗口底部的更乾淨的方式，但保持在頁腳的上方並在頁面寬度上觸發

回答

相關問題