позиционирование шрифта удивительный значок для прокрутки

Question

У меня возникли проблемы с позиционированием шрифта-удивительного значка. Я хочу, чтобы стрелка вниз уменьшалась, когда пользователь прокручивается в нижней части документа, а стрелка вверх исчезает. Когда пользователь прокручивается к вершине документа, я хочу, чтобы стрелка вверх исчезла и стрелка вниз, чтобы исчезнуть.

Я считаю, что мне нужно позиционировать стрелки вверх и вниз друг над другом, поэтому нет эффекта «прыжка», когда один исчезает, а другой исчезает. Однако, когда я пытаюсь полностью позиционировать стрелки, весь родительский div исчезает. Может ли кто-нибудь сказать, что происходит?

HTML:

<div id="arrowholder"> 
    <div class="scroll">SCROLL</div> 
    <i id="down" class="fa fa-4x fa-angle-down"></i> 
    <i id="up" class="fa fa-4x fa-angle-up"></i> 
</div> 

CSS:

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

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

     } 
}); 

Answer 1

вы можете использовать animate() вместо fadeIn/Out, используя opacity, потому что fadeIn/Out сделать элемент display:block/none, которые делают эффект "прыжки"

$(window).scroll(function() { 
 
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
 
    $("#down").animate({ 
 
     opacity: 0 
 
    }, 100); 
 
    $("#up").animate({ 
 
     opacity: 1 
 
    }, 100); 
 
    } 
 
    //var scrollTop = $(this).scrollTop(); 
 
    //console.log(scrollTop); 
 
    var topDistance = $('#up').offset().top; 
 
    if (topDistance <= $(window).height()) { 
 
    $("#down").animate({ 
 
     opacity: 1 
 
    }, 100); 
 
    $("#up").animate({ 
 
     opacity: 0 
 
    }, 100); 
 

 
    } 
 
});

#arrowholder { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    bottom: 0; 
 
} 
 
.scroll { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 90%; 
 
    position: absolute; 
 
    bottom: 50px; 
 
    left: 53%; 
 
    transform: translate(-53%); 
 
} 
 
#up { 
 
    opacity: 0 
 
} 
 
#up, 
 
#down { 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis sem sed eros dignissim aliquam at non massa. Integer placerat enim eros, quis condimentum dui malesuada nec. Integer sagittis facilisis laoreet. Vivamus mattis luctus tellus, at ullamcorper 
 
    lacus ultricies id. Cras sagittis, erat vitae cursus pulvinar, eros libero pulvinar nisl, vitae ultricies nulla velit in lectus. Nulla a eros vel mi tincidunt interdum. Aliquam volutpat porta arcu eget viverra. Maecenas a porta nulla, ac fermentum est. 
 
    Aliquam convallis molestie magna et accumsan. Phasellus lacinia aliquet est et pretium. Nullam in ex suscipit nunc pulvinar elementum. Pellentesque pulvinar libero cursus, suscipit dui vel, viverra urna. Nulla ut justo luctus, porttitor magna non, suscipit 
 
    eros. Etiam pharetra porttitor diam, at congue eros efficitur in. Proin porta sagittis sem. Vivamus ut ullamcorper magna. Aliquam pulvinar eleifend augue, sit amet semper libero vulputate ut. Phasellus dapibus mauris eget risus fringilla, at vulputate 
 
    dolor vehicula. Etiam at turpis ac arcu bibendum facilisis. Aliquam at magna tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent rutrum, nibh dignissim ultricies dapibus, mi erat elementum diam, ac 
 
    mattis felis metus et sem. Quisque hendrerit odio quis venenatis tempor. Cras id elit ultricies purus ultricies facilisis sagittis quis ipsum. Donec condimentum risus mauris, nec blandit libero feugiat eget. Cras nisl dolor, rhoncus accumsan lacinia 
 
    ac, elementum non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ullamcorper velit, vitae faucibus felis. Ut nec sem pellentesque, laoreet velit a, imperdiet nulla. Integer viverra rhoncus ligula ac commodo. Etiam 
 
    justo purus, lacinia non lectus vulputate, hendrerit iaculis lorem. Praesent condimentum odio sapien, vitae lacinia enim facilisis sit amet. Aenean vehicula fringilla pretium. Quisque est magna, venenatis a nisi eget, ultricies tincidunt velit. Mauris 
 
    nibh tellus, tempor vel libero nec, suscipit sagittis augue. Nam id luctus lacus. Proin sit amet orci mollis, rhoncus orci in, vehicula enim. Aenean a odio non justo auctor hendrerit eu et mi. Curabitur eu augue neque. Donec bibendum felis vel nibh 
 
    viverra iaculis. Duis rhoncus elementum mauris. Nam ac magna ex. Quisque sodales vitae libero vitae tincidunt. Nulla pretium cursus hendrerit. Aliquam ut varius nisl. Phasellus nec ipsum pharetra, tempus lectus vel, gravida arcu. Donec non semper ipsum, 
 
    eu sagittis leo. Vestibulum a leo mollis, malesuada mauris quis, facilisis mauris. Nam purus sem, pulvinar lacinia dui eu, scelerisque placerat odio. Proin egestas quis sem et fringilla. Ut convallis ipsum tortor, in luctus odio mattis a.</div> 
 
<div id="arrowholder"> 
 
    <div class="scroll">SCROLL</div> 
 
    <i id="down" class="fa fa-4x fa-angle-down"></i> 
 
    <i id="up" class="fa fa-4x fa-angle-up"></i> 
 
</div>

Answer 2

Вы можете попробовать это, и изменить Z-индекс #down к выше для включения нажмите действия над #up.

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