我有一个固定位置的箭头，以指示用户折叠下面有更多内容.
这就是CSS:
.arrow {
position: fixed;
right: 0;
top: 100%;
transform: translateY(-100%);
margin: -10px 10px 0 0;
z-index: 100;
opacity: 0.4;
}
.arrow svg {
width: 80px;
height: 80px;
}
我希望箭头在到达页脚时隐藏，并在向上滚动时可见.
有什么技巧我可以用来表演的吗？我试着使用IntersectionWatch，但只找到了it doesn't work with position: fixed个.我在想也许可以改变它的css，但我不确定我如何才能达到同样的效果.
我试了position: sticky个.但我不确定你能不能做这种事.
我也在考虑使用Scroll Drive Animation，但我从来没有使用过它们，不知道他们的API是否允许这样的东西.
有没有一种方法可以单独使用CSS来实现这种行为，或者我需要使用JavaScript和滚动事件？我更喜欢使用CSS解决方案或任何不涉及在滚动事件上执行JavaScript的现代解决方案.
EDIT这里是问题的再现.
body {
margin: 0;
}
.arrow {
position: fixed;
right: 0;
top: 100%;
transform: translateY(-100%);
margin: -10px 10px 0 0;
z-index: 100;
opacity: 0.4;
}
.arrow svg {
width: 80px;
height: 80px;
}
.force-scrollbar {
height: 1000px;
}
footer {
background: black;
height: 200px;
}<div class="force-scrollbar">
</div>
<footer>
<div class="arrow">
<svg width="361.514" height="361.514" viewBox="0 0 95.651 95.651" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-58.796 -13.995)"><circle style="fill:#e6e6e6;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.79999;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" cx="106.621" cy="61.821" r="47.825"></circle><path style="fill:#ff5300;fill-rule:evenodd;stroke-width:3.70417;stroke-linecap:square" d="M94.271 32.634a3.252 3.252 0 0 0-3.26 3.26v31.111h-6.33a2.612 2.01 0 0 0-2.194 3.101l21.58 25.686a2.99 2.3 0 0 0 5.02 0l21.685-25.81a2.507 1.929 0 0 0-2.105-2.977h-6.525V35.894a3.252 3.252 0 0 0-3.26-3.26z"></path></g></svg>
</div>
</footer>