Javascript 图像将随页面一起滚动

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

var bbimagebannerfile = "";

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

var bbimagebannerfile=“”；
文件。填写（“”）；

此图像位于页面底部。我想做的是，一旦用户到达页面的位置，让这个图像和页面一起滚动，当用户向上滚动时，这个图像会再次变为静态。有人能帮我吗？

举个例子：

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

在您的情况下，可以尝试添加具有上述样式的类属性

JS小提琴：

另一个javascript演示： （codepen，因为jsiddle不允许

document.write

）

更新： 如果使用

jQuery

，则可以使用

.scroll（）

：

下面是一个演示：

---

谢谢你的回答。我会尽力解释情况。当您打开网站时，用户看不到加载了我发布的代码的图像，这是正常的。但当用户向下滚动到特定数量的像素时，图像变得可见。我想让这个图像只有在用户到达页面时才可以和页面一起滚动。当页面打开时，它不应该是可滚动的。当用户向下滚动页面直到到达图像时，它只应该是可滚动的，并且只应该是底部。你有没有尝试过什么或者做过一些研究？如果没有，请尝试以下关键字：

jQuery scroll event

和

windowscrolltop

。检查用户滚动的距离，并相应地向图像添加/删除样式类。

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

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>");

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

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