Javascript 当图像经过页面上的某个点时，如何更改图像，然后在图像高于该点时将其更改回原来的位置？

我对javascript完全陌生，但我想学习它而不是jQuery来获得一些基础知识。我要创建的函数应该设置箭头的动画，使其在通过50%的页面时向上翻转。除此之外，它在倒置时调用的函数应该更改

So：向上箭头单击（向上滚动） 向下箭头单击（向下滚动）

---

我相信我听起来很愚蠢，但也许有人能理解我要解释的内容。

您可以编写

imageelement.src

属性以指向不同的箭头，或者，为了获得额外的平滑度，使用包含箭头和write

element.style.backgroundPosition

的CSS精灵来更改显示的图像，而无需加载新图像

您可以将一个新函数分配给

imageelement.onclick

以更改单击它时发生的情况，但通常使用一次单击函数根据状态决定要执行的操作更简单

例如：

#箭{
位置：固定；顶部：0；左侧：0；z索引：10；
宽度：32px；高度：32px；
背景图片：url（/img/arrow.png）；
}
.向下箭头{
背景位置：0；
}
.向上箭头{
背景位置：0-32px；
}
var arrow=document.getElementById（'arrow'）；
window.onscroll=window.onresize=function（）{
arrow.className=ishalwaydown（）？“arrow-up”：“arrow-down”；
};
arrow.onclick=function（）{
var h=document.documentElement.scrollHeight；
滚动到（0，isHalfwayDown（）？0:h）；
window.onscroll（）；
};
函数ishalwaydown（）{
变量y=document.documentElement.scrollTop+document.body.scrollTop；
var h=document.documentElement.scrollHeight；
返回y>=h/2；
}

---

浏览器兼容性说明：

window.onscroll（）

是因为IE在使用

scrollTo（）

时没有触发滚动事件。

html

和

body

的滚动偏移量必须在

isHalfwayDown（）

中一起添加，因为浏览器很遗憾不同意哪个元素代表视口。

我是jquery的粉丝，总是希望在可以的地方使用jquery而不是javascript。您可以做的一件事是使用jquery scroll（）函数。当有人滚动页面时，您可以获得页面的滚动量，如果您知道页面高度和总滚动量超过50%，请更改图像的src属性，反之亦然

<div id="arrow" class="arrow-down"></div>


#arrow {
    position: fixed; top: 0; left: 0; z-index: 10;
    width: 32px; height: 32px;
    background-image: url(/img/arrow.png);
}
.arrow-down {
    background-position: 0 0;
}
.arrow-up {
    background-position: 0 -32px;
}


var arrow= document.getElementById('arrow');

window.onscroll=window.onresize= function() {
    arrow.className= isHalfwayDown()? 'arrow-up' : 'arrow-down';
};
arrow.onclick= function() {
    var h= document.documentElement.scrollHeight;
    scrollTo(0, isHalfwayDown()? 0 : h);
    window.onscroll();
};

function isHalfwayDown() {
    var y= document.documentElement.scrollTop+document.body.scrollTop;
    var h= document.documentElement.scrollHeight;
    return y>=h/2;
}