Question

我有一个固定位置行，有fa-angle-double-down。

<!-- Intro Section -->
<section id="intro" class="intro-section">
   <div class="container">
    <div class="row row-fixed">
        <a  class="page-scroll " href="#about">
          <i class="fa fa-angle-double-down hvr-buzz"></i>
        </a>
   </div>
</section>

向下滚动时，fa-angle-double-down由fa-angle-double-up替换，remove / addClass替换为链接中的href属性。

$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
    $(".intro-section .container .row-fixed .page-scroll i").removeClass('fa fa-angle-double-down hvr-buzz');
    $(".intro-section .container .row-fixed .page-scroll i").addClass('fa fa-angle-double-up hvr-buzz');
    $(".intro-section .container .row-fixed a").attr("href", "#page-top");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $(".intro-section .container .row-fixed .page-scroll i").addClass('fa fa-angle-double-down hvr-buzz');
    $(".intro-section .container .row-fixed .page-scroll i").removeClass('fa fa-angle-double-up hvr-buzz');
    $(".intro-section .container .row-fixed a").attr("href", "#about");
}

}）;

好吧，一切正常，但是当走到顶端，经过一次或多次向下滚动后，会出现fa fa-angle-double-down，但是作为一个小块，具有相同的fa fa-angle-double行为 - 但不一样的外表。

为什么？

Answer 1

我这样解决了：

$(window).scroll(function() {

if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
    $(".intro-section .container .row-fixed .page-scroll i").removeClass();
    $(".intro-section .container .row-fixed .page-scroll i").addClass('fa fa-angle-double-up hvr-buzz');
    $(".intro-section .container .row-fixed .page-scroll .fa-angle-double-up").css("color","#000");
    $(".intro-section .container .row-fixed a").attr("href", "#page-top");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $(".intro-section .container .row-fixed .page-scroll i").removeClass();
    $(".intro-section .container .row-fixed .page-scroll i").addClass('fa fa-angle-double-down hvr-buzz');
    $(".intro-section .container .row-fixed .page-scroll .fa-angle-double-down").css("color","#FFF");
    $(".intro-section .container .row-fixed a").attr("href", "#about");
}

}）;

需要一点耐心

Jquery方法addClass，removeClass与fontawesome图标有问题

1 个答案: