Question

我有一张图片：

<img title="<?php echo JText::_('AEROBOT_HELLO'); ?>" src="images/aerobot.png" id="aerobot" align="right" />

当用户滚动页面时，我想移动图像（让它随时可见）。我试过这段代码：

            var $scrollingDiv = $("#aerobot");

        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });

但它正在移动我在页面上的整个内容（在图像下）。那么，如何只使用滚动来移动图像？

Answer 1

制作position:absolute并调整顶部和左侧值：

img {z-index:1000;top:0; left:0;position:absolute;width: 300px; height: 50px; float:left;}

这里是示例中的代码，最小化浏览器以显示滚动

Example

要使其保留在其父容器中，您必须将 display：block 放入其中， position：relative 到父容器。右对齐将右：0 放到图像上;

img {
    z-index:1000;
    top:0;
    position:absolute;
    width: 350px;
    height: 50px; 
    background-color:blue;   
    right:0;
    display:block;
}
#parent{
    width: 400px;
    height: 400px;
    background-color:red;
    position:relative;
    display:block;
}

Example 2

Answer 2

无需使用JS：使用CSS属性position: fixed。它的作用类似于绝对定位，但当用户滚动时，图像不会向上或向下移动。

用户滚动页面时移动图像（使用jQuery）？

2 个答案: