JS基於視點添加填充頂部？

是否可以根據視點/屏幕尺寸將填充頂部添加到元素？JS基於視點添加填充頂部？

例如，你有一個大的圖像橫幅，你希望這是你加載頁面時看到的第一個東西，下面沒有內容，因爲這已經通過填充通過視點js添加下來，所以你向下滾動到那。

因此，一個響應圖像然後你的內容，但圖像總是先填充屏幕，無論屏幕大小？

然後您將內容向上滾動到橫幅圖像上，因此需要基於屏幕大小的動態填充？

來源

2013-10-17 user4630

是的，它是可能的^^看看這些jQuery函數的$（document）.height（）;和http://api.jquery.com/scrollTop/ –

我知道你想在頁面的頂部添加一個填充/邊距來將其主要內容向下推到屏幕的高度。

這裏是一個快速JS我jQuery

將這個代碼<head>標籤內後，包括標籤的jQuery本身寫道。

$(window).load(function() { 
    $(".contentClass").css('padding-top', $(window).height()); 
});

您可以在HTML文檔的<head>標籤此標記添加jQuery庫：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

來源

2013-10-17 09:25:54

謝謝你這正是我的意思，我會給它一個去！ – user4630

這可行，但以百分比而不是像素爲單位的任何方式？謝謝。 – user4630

我不知道任何手頭的技巧。但我認爲最好的選擇是使用JS。 –

如果你想確保你的形象會推內容儘快所以訪問該網站的人可能看不到下面的內容，我建議在整個頁面加載後執行的不是簡單的JavaScript，而是放在圖像下方並在圖像加載後立即執行：

<img id="banner" src="my-image.jpg"> 
<script> 
    var banner = document.getElementById('banner'); 
    banner.onload = function() { 
     banner.style.marginTop = (window.innerHeight - banner.offsetHeight) + 'px'; 
    }; 
</script>

然而，更好的方法是通過對圖像加載到DOM的JavaScript

<div id="banner"></div> 
<script> 
    var banner = document.getElementById('banner'); 
    var img = new Image(); 

    banner.appendChild(img); 
    img.onload = function() { 
     banner.style.marginTop = (window.innerHeight - banner.offsetHeight) + 'px'; 
    }; 
    img.src = 'my-image.jpg'; 
</script>

來源

2013-10-17 09:34:36 matewka

謝謝，如果圖像實際上是一個元素的背景圖像而不是物理img，那麼這個工作是否會實現？ – user4630

它根本不會。如果你想使用圖像作爲背景，你不能獲取它的尺寸。你將不得不簡單地瞭解它們。 – matewka

JS基於視點添加填充頂部？

回答

相關問題