图像随页面滚动

Question

我有这样的代码来提供来自第 3 方系统的图像：

var bbimagebannerfile = "";

document.write("<a href=\"%%__REDIRECT%%\" target=\"_blank\"><img src=\"" + bbimagebannerfile + "\" border=\"0\" /></a>");

这张图片位于页面底部。我想要做的是，一旦用户到达它的位置，让这个图像与页面一起滚动，当用户向上滚动时，这个图像再次变为静态。谁能帮我解决这个问题？

Answer 1

举个例子：

<div id="fixed-image"></div>

如果我们假设上面的 HTML 是您正在提供的内容。您可以添加此 css:

#fixed-image {
    width: 100%;
    height: 100px;
    background-color: red;
    position: fixed;
    bottom: 0;
}

对于您的情况，您可以尝试添加具有上述样式的 class 属性。

JS Fiddle: http://jsfiddle.net/df6tmLrg/

你的另一个演示 javascript： http://codepen.io/FakeHeal/pen/qEgxKN（codepen，因为jsfiddle不允许document.write）

var bbimagebannerfile = "https://avatars2.githubusercontent.com/u/1038697?v=3&s=460";

document.write("<a href=\"%%__REDIRECT%%\" target=\"_blank\" class=\"bottom-fixed\"><img src=\"" + bbimagebannerfile + "\" border=\"0\" width="100" /></a>");

和 css:

.bottom-fixed {
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
}

更新：如果使用jQuery，则可以使用.scroll()：

var t =  $("#fixed-image").offset().top; 

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $("#fixed-image")
        .css('position', 'fixed') //we change the position to fixed
        .css('top',0); // and the top to zero
    } else {
        $("#fixed-image")
        .css('position', 'static') //we change the position to fixed
        .css('top',0); // and the top to zero
    }
});

这是一个演示： http://jsfiddle.net/df6tmLrg/2/

图像随页面滚动

Image becomes scrollabe with the page

javascript

css

jquery

scroll