时间戳

首页 > 解决方案 > 当用户滚动回页面顶部时，如何使徽标效果恢复为“正常”？

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

问题描述

仍然需要这方面的帮助。到目前为止，我收到的答案都没有奏效，尽管我很感激他们。

当徽标 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)
        };
      });
    });

标签： javascriptjqueryhtmlcss

解决方案

只需添加 else 条件并还原fadeInandfadeOut

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

推荐阅读