Question

仍然需要帮助。到目前为止，我收到的答案没有用，尽管我非常感谢。

随着徽标2逐渐淡入，我的标题中的徽标1逐渐向下滚动。当用户滚动时，我希望标题返回到“正常”状态，并且徽标1将显示（淡入）返回页面顶部。我是新手，对js的了解很少。我研究了各种方法来实现此目的，但无法弄清楚如何编辑当前代码以创建此新效果……而不会搞砸一切。感谢您的帮助。

 <header>
                <div id="nav" class="navbar">
                    <div id="nav_left">
                        <a href="index.html">HOME</a>
                        <a href="services.html">SERVICES</a>
                        <a href="portfolio.html">PORTFOLIO</a>
                    </div>
                    <a href="index.html" id="logo" class="Claire_logo">
                        <img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
                            style="display:none" />
                        <img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
                    </a>
                    <div id="nav_right">
                        <a href="blog.html">BLOG</a>
                        <a href="about.html">ABOUT</a>
                        <a href="contact.html">GET IN TOUCH</a>
                    </div>
                </div>
            </header>

    $(document).ready(function() {
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll > 70) {
          $('#logo_Claire_blue').fadeOut(800);

          setTimeout(function() {
            $('#logo_Claire').fadeIn(800);
          }, 800)
        };
      });
    });

Answer 1

HTML：

<div class="wrapper">
<header>
  <div class="lrg-logo">Your Logo</div>
</header>
</div>

CSS样式：

.wrapper {
  height: 2000px;
  position: relative;
}

header {
  position: fixed;
  width: 100%;
  height: 50px;
}

.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background-image: url('https://dummyimage.com/300.png/09f/fff');
}

.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background-image: url('https://picsum.photos/id/237/200/300');
}

Js部分：

$(function () {
    var logo = $(".lrg-logo"); $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            if (!logo.hasClass("sml-logo")) {
                logo.hide();
                logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn("slow");
            }
        } else {
            if (!logo.hasClass("lrg-logo")) {
                logo.hide();
                logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn("slow");
            }
        }

    });
});

请让我知道是否可行，谢谢。

Answer 2

只需添加else条件并还原fadeIn和fadeOut

$(document).ready(function() {

    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if (scroll > 70) {
        $('#logo_Claire_blue').fadeOut(800);
        setTimeout(function() {
          $('#logo_Claire').fadeIn(800);
        }, 800)
      } else {
        $('#logo_Claire_blue').fadeIn(800);
        setTimeout(function() {
          $('#logo_Claire').fadeOut(800);
        }, 800)
      }
    });
});

更新：

在其他情况下尝试这样

$('#logo_Claire_blue').fadeIn(800);
$('#logo_Claire').fadeOut(800);

Answer 3

 $(document).ready(function() {
                            $(window).scroll(function() {
                                if ($(document).scrollTop() < 8) {
                                    $('nav').addClass('transparent');
                                    $('.image1').show();
                                    $('.image2').hide();
                                } else {
                                    $('nav').removeClass('transparent').css('color: black');
                                    $('.image2').show();
                                    $('.image1').hide();
                                }
                            });
                        });

当用户滚动回到页面顶部时，如何使徽标效果恢复为“正常”？

3 个答案: