定位字体真棒图标滚动

Question

我在定位超赞字体图标时遇到了一些问题。我想要发生的是当用户滚动到文档底部时向下箭头淡出，向上箭头淡入。当用户滚动到文档顶部时，我希望向上箭头淡出以及淡入的向下箭头。

我认为我需要将向上和向下箭头放置在彼此之上，这样当一个淡出另一个淡入时就不会出现 "jump" 效果。但是，当我尝试定位时绝对箭头，整个父 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

您可以试试这个，将#down 的 z-index 更改为更高，以便在#up 上启用点击操作。

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

Answer 2

您可以使用 animate() 而不是 fadeIn/Out，使用 opacity 因为 fadeIn/Out 使元素变为 display:block/none，这使得 "jumping"

$(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>

定位字体真棒图标滚动

positioning font awesome icon to scroll

html

css

jquery

font-awesome