Скрыть элемент html при прокрутке вниз до нижнего колонтитула

Question

У меня есть прыгающая стрелка вниз и вы хотите скрыть ее, когда я дойду до нижнего колонтитула после прокрутки вниз и снова покажу ее, когда я прокручу назад. Как я могу сделать это без JavaScript?

.bounce { 
 
    position: fixed; 
 
    left: 95%; 
 
    bottom: 0; 
 
    margin-top: -25px; 
 
    margin-left: -25px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: #65C178; 
 
    background-size: contain; 
 
    opacity: 0.8; 
 
    -moz-border-radius: 70px; 
 
    -webkit-border-radius: 70px; 
 
    border-radius: 70px; 
 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
 
    -webkit-animation: bounce 1s infinite; 
 
    -webkit-overflow-scrolling: touch -webkit-transition: all 500ms ease-in-out; 
 
    -moz-transition: all 750ms ease-in-out; 
 
    -ms-transition: all 750ms ease-in-out; 
 
    -o-transition: all 750ms ease-in-out; 
 
    transition: all 750ms ease-in-out; 
 
    overflow: hidden 
 
} 
 
@-webkit-keyframes bounce { 
 
    0% { 
 
    bottom: 5px; 
 
    } 
 
    25%, 75% { 
 
    bottom: 15px; 
 
    } 
 
    50% { 
 
    bottom: 20px; 
 
    } 
 
    100% { 
 
    bottom: 0; 
 
    } 
 
}

<div class="bounce"></div>

Answer 1

вы можете попробовать добавить этот скрипт (вы должны иметь файл JS)

<script> 
$(window).scroll(function(){ 
    var threshold = 200; // number of pixels before bottom of page that you want to start fading 
    var op = (($(document).height() - $(window).height()) - $(window).scrollTop())/threshold; 
    if(op <= 0){ 
    $(".bounce").hide(); 
} else { 
    $(".bounce").show(); 
} 
    $(".bounce").css("opacity", op); 
}); 

</script> 

Answer 2

, насколько я знаю, не существует CSS-единственное решение. вам понадобится javascript для определения положения прокрутки. Единственный способ CSSonly, о котором я мог думать, - поставить нижний колонтитул перед стрелкой (с z-index). поэтому он скрывается за ним.