0

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

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

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

然后，您将内容向上滚动到横幅图像上，因此需要基于屏幕尺寸的动态填充？

4

2 回答 2

1

我了解您想在页面顶部添加填充/边距以将其主要内容向下推到屏幕的高度。

这是我用jQuery编写的快速 JS

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

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

<head>您可以在 html 文档的标签中添加带有此标签的 jQuery 库：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
于 2013-10-17T09:25:54.010 回答
0

如果您想确保您的图片会尽快推送内容，以便访问该网站的人看不到下面的内容，我建议不要在整个页面加载后执行纯 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>
于 2013-10-17T09:34:36.793 回答