Question

我有一些jQuery代码，只要用户点击按钮，就会在我的页面中添加图片。我希望这张图片显示在用户正在查看的内容之上。问题是我将此图像设置为position：absolute，它显示在页面的最顶部。想想这样：

我的页面高1000px。如果用户视口是300px，那么我希望图像显示在那里，而不是在页面的最顶部。位置：静态在这种情况下对我不起作用，因为我希望用户能够滚动浏览图像而不是跟随他。

有什么想法吗？我正在思考jQuery函数的某些内容，它返回视口所在网页的距离，并将其设置为图像的顶部位置（因为我将其设置为绝对值）。

提前致谢！

Answer 1

var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;

然后相对于viewportX和viewportY定位它。

Answer 2

我使用这个小的jQuery扩展来设置一些内容在屏幕上：

(function($)
{
$.fn.centerMe = function(centerIn)
{
    var containerWidth = $(centerIn).width();
    var containerHeight = $(centerIn).height();
    var elWidth = $(this).width();
    var elHeight = $(this).height();
    $(this).css('left', containerWidth / 2 - elWidth / 2);
    var adjTop = containerHeight / 2 - elHeight / 2;
    $(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);

用法基本上是：$('#elemToCenter').centerMe(window);

如何在屏幕上显示元素但不在html / css的屏幕顶部？

2 个答案: