JS基于视点添加填充顶部？
Posted
技术标签:
【中文标题】JS基于视点添加填充顶部？【英文标题】：JS adding padding top based on viewpoint? 【发布时间】：2013-10-17 09:16:52 【问题描述】：是否可以根据视点/屏幕大小将填充顶部添加到元素？
例如，您有一个大图像横幅，并且您希望它是您在加载页面时看到的第一件事，下面没有任何内容，因为该内容已通过视点 js 添加的填充被向下推，因此您然后滚动到此为止。
所以是响应式图像然后是您的内容，但无论屏幕大小如何，图像总是首先填满屏幕？
然后您将内容向上滚动到横幅图像上，因此需要根据屏幕尺寸进行动态填充？
【问题讨论】：
是的，有可能 ^^ 查看这些 jquery 函数 $(document).height();和api.jquery.com/scrollTop 【参考方案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>
【讨论】：
谢谢你就是我的意思，我会试一试！ 这行得通，但是有没有办法以百分比而不是像素来表示呢？谢谢。 我不知道手头有什么技巧。但我认为最好的选择是使用 JS。【参考方案2】：如果您想确保您的图片会尽快推送内容，以便访问该网站的人看不到下面的内容，我建议您不要在整个页面加载，但放置在图像下方并在图像加载后立即执行：
<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>
【讨论】：
谢谢，如果图像实际上是元素的背景图像而不是物理图像，这会起作用吗？ 根本不会。如果您想将图像用作background，则无法获取其尺寸。您只需要了解它们即可。以上是关于JS基于视点添加填充顶部？的主要内容，如果未能解决你的问题，请参考以下文章
想要在Google Chart（可视化）中的条形图中添加注释文本的顶部填充
我可以在从 Access DB 填充的组合框顶部添加一个额外的行吗
有一个图例会导致 IE 忽略字段集的顶部填充 - 替代方案？