Question

是否可以根据视点/屏幕尺寸将填充顶部添加到元素中？

例如，你有一个大的图片横幅，并且你希望这是你在加载页面时看到的第一件事，下面没有任何内容因为已经通过视点js添加的填充向下推，所以你滚动到那个。

然后是您的内容的响应式图像，但无论屏幕大小如何，图像始终首先填满屏幕？

然后在横幅图像上向上滚动内容，因此需要根据屏幕尺寸进行动态填充？

Answer 1

据我所知，您希望在页面顶部添加填充/边距，以将其主要内容下移到屏幕的高度。

这是我用jQuery

写的快速JS

将此代码放在jQuery本身的include标记之后的<head>标记内。

$(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>

Answer 2

如果你想确保你的图片能够尽快推送内容，那么访问该网站的人将看不到下面的内容，我建议不要在之后执行简单的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>

然而，更好的方法是通过javascript

将图像加载到DOM中

<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>

JS基于视点添加填充顶部？

2 个答案: