jQuery的滾動不-相當頂部

Question

我已經知道：

$(body).animate({scrollTop: $("#id").offset().top}, 'slow'); 

但我有一個奇怪的情況：我工作的這個特定的網站上有一個固定的頁眉/旗幟（200像素高）留在當頁面滾動時放置。如果我使用上面的例程，它會逐字滾動元素到窗口的頂部，但頭部/橫幅將隱藏頭200px的值（我不喜歡固定標題/橫幅，但我不是允許改變，在這個時候）。

所以，問題是：如何滾動到頂部200px，以便元素滾動到正下方的標題/橫幅？

在此先感謝您對此問題的幫助。

Answer 1

有很多方法可以做到這一點，但是這不能通過$(body).animate({scrollTop: $("#id").offset().top - 200}, 'slow');來解決嗎？

Answer 2

這個問題是，與位置：固定 - 從頁面流中刪除標題，頁面的其餘部分被渲染，就好像它不存在 - 所以滾動到元素會出現的高度相同標題。

解決方案是，當您將標題的位置設置爲固定（如果它在滾動位置上更改） - 您還可以通過標題的高度設置主體的填充頂部。 如果標題始終固定在屏幕的頂部，並且不會根據滾動部分進行更改 - 那麼只需將填充頂部直接應用於主體即可。

因此如果標題是在高度200像素 - 簡單地應用

body {padding-top: 200px} 

當報頭具有位置是：固定施加到其上。

當標題返回到position：static時，不要忘記刪除相同的填充。 - 假設在應用粘性類時存在滾動位置。

完成這一切的最好方法是創建一個類，如header-offset，並在應用位置時將其應用於body：fixed。

所以這將是

.header-offset{padding-top: 200px; // or whatever height your header is}