Question

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

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;
}

在您的情况下，您可以尝试使用上面的样式添加类属性。

JS小提琴：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/

图像可以随页面滚动

1 个答案: