如何在屏幕上顯示元素，但不在html/css中的屏幕頂部？

我有一些jQuery代碼，只要用戶點擊一個按鈕，就會將圖片添加到我的頁面。我希望這張照片可以顯示在用戶正在看的任何位置。問題是，我把這個圖像設置爲position：absolute，它顯示在頁面的最頂端。想想看，像這樣：如何在屏幕上顯示元素，但不在html/css中的屏幕頂部？

我的頁面高1000px。如果用戶視口爲300px，那麼我希望圖像顯示在該位置，而不是在頁面的頂部。位置：在這種情況下，靜態對我不起作用，因爲我希望用戶能夠滾動瀏覽圖像並且不會跟着他。

任何想法？我正在考慮沿着jQuery函數的一些方面，它返回視圖的網頁向下多遠，並將其設置爲圖像的頂部位置（因爲我已將它設置爲絕對）。

在此先感謝！

來源

2014-01-16 Vladimir Rosca

也許會對位置一看：固定的，否則JS和window.scrollTop（）會幫助你。 –

我試着將位置設置爲絕對位置，但它顯示在頁面的最頂端。我希望它顯示，但用戶滾動。我試過位置：固定並顯示在當前視口中，但隨着用戶滾動，它隨視口滾動。這不是我想要的。我希望它顯示在視口的下方，然後隨着用戶的上下滾動而停留在那裏。 –

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

然後它定位相對於viewportX和viewportY。

來源

2014-01-16 00:16:11 Amoliski

明白了。多謝。完全是我想要它做的。你是男人，我的男人！ –

我用這個小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);

來源

2014-01-16 00:48:59 kellycode

如何在屏幕上顯示元素，但不在html/css中的屏幕頂部？

回答

相關問題