Question

我在定位字体真棒图标时遇到了一些麻烦。我想要发生的是当用户滚动到文档的底部并且向上箭头淡入时向下箭头淡出。当用户滚动到文档的顶部时，我希望向上箭头淡出和向下箭头淡入。

我相信我需要将上下箭头放在彼此的顶部，这样就不会跳跃＆＃34;跳跃＆＃34;当一个淡出而另一个淡入时效果。然而，当我试图绝对定位箭头时，整个父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

您可以使用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); } });，从而产生＆＃34;跳跃＆＃34;

＆＃13;

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

＆＃13;

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

＆＃13;

ln -s /usr/bin/nodejs /usr/sbin/node

＆＃13;

定位字体真棒图标滚动

2 个答案: