是否可以根据视点/屏幕尺寸将填充顶部添加到元素中?
例如,你有一个大的图片横幅,并且你希望这是你在加载页面时看到的第一件事,下面没有任何内容因为已经通过视点js添加的填充向下推,所以你滚动到那个。
然后是您的内容的响应式图像,但无论屏幕大小如何,图像始终首先填满屏幕?
然后在横幅图像上向上滚动内容,因此需要根据屏幕尺寸进行动态填充?
答案 0 :(得分: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>
答案 1 :(得分: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>