Jquery 定位字体图标以滚动

我在定位字体图标时遇到问题。我想做的是，当用户滚动到文档底部时，向下箭头淡出，向上箭头淡入。当用户滚动到文档顶部时，我希望向上箭头淡出，向下箭头淡入

我认为我需要将上下箭头放置在彼此的顶部，这样当一个淡出而另一个淡入时就不会出现“跳跃”效果。但是，当我尝试绝对定位箭头时，整个父div将消失。有人知道发生了什么事吗

html:

jquery：

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
           $( "#down" ).fadeOut();
           $( "#up" ).fadeIn();

       }
       //var scrollTop = $(this).scrollTop();
        //console.log(scrollTop);
        var topDistance = $('#up').offset().top;
        if ( topDistance <= height ) {
            $( "#up" ).fadeOut();
            $( "#down" ).fadeIn();

        }
});

$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-100）{
$（“#向下”）.fadeOut（）；
美元（“#向上”）.fadeIn（）；
}
//var scrollTop=$（this.scrollTop（）；
//控制台日志（scrollTop）；
var topDistance=$（'#向上'）.offset（）.top；
如果（topDistance，您可以尝试此操作，并将#down的z索引更改为更高，以启用向上的单击操作

您可以尝试此操作，并将z索引从#向下更改为更高，以启用向上的单击操作

您可以使用而不是
fadeIn/Out
，使用
opacity
，因为
fadeIn/Out
使元素
显示：block/none
，从而产生“跳跃”效果


$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-100）{
$（“#向下”）。设置动画({
不透明度：0
}, 100);
$（“#向上”）。设置动画({
不透明度：1
}, 100);
}
//var scrollTop=$（this.scrollTop（）；
//控制台日志（scrollTop）；
var topDistance=$（'#向上'）.offset（）.top；
如果（topDistance您可以使用而不是
fadeIn/Out
，使用
opacity
，因为
fadeIn/Out
使元素
显示：block/none
，产生“跳跃”效果


$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-100）{
$（“#向下”）。设置动画({
不透明度：0
}, 100);
$（“#向上”）。设置动画({
不透明度：1
}, 100);
}
//var scrollTop=$（this.scrollTop（）；
//控制台日志（scrollTop）；
var topDistance=$（'#向上'）.offset（）.top；
如果（topDistance@LauraNMS你不知道什么有用？我解释了
animate（）
，你还需要我向你解释什么？：）@LauraNMS你不知道什么有用？我解释了
animate（）
，你还需要我向你解释什么？：）
#arrowholder {
    position: fixed;
    left: 0; right: 0;
    text-align: center;
 bottom: 0px;

}
.scroll {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}
#down {
    display: block;
    /*position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);*/
    z-index: 5;
}
#up {
    display: none;
    /*position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);*/
    z-index: 2;
}

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
           $( "#down" ).fadeOut();
           $( "#up" ).fadeIn();

       }
       //var scrollTop = $(this).scrollTop();
        //console.log(scrollTop);
        var topDistance = $('#up').offset().top;
        if ( topDistance <= height ) {
            $( "#up" ).fadeOut();
            $( "#down" ).fadeIn();

        }
});

#up {
    visibility:hidden;
    margin-top:-64px;
    display: block;
    /*position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);*/
    z-index: 2;
}