在滚动时淡入另一个徽标

Fade in another logo on scroll

本文关键字：另一个 淡入 滚动      更新时间：2023-09-26

当用户向下滚动页面时，我目前正在将徽标交换为较小的徽标。目前是直接交换。但是，我想添加一个漂亮的动画淡入/淡出，以便较大的徽标淡出，较小的徽标淡入，反之亦然。

这是我目前尝试的一支笔： http://codepen.io/abbasinho/pen/yyomrB

我试图添加fadeIn但没有喜悦。

.JS：

$(function() {
    var logo = $(".lrg-logo");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 500) {
            logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
        } else {
            logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
        }
    });
});

.CSS：

.wrapper {
  height: 2000px;
  position: relative;
  background: green;
}
header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: grey;
}
.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background: red;
}
.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}
2件事

：

  • 徽标必须首先隐藏才能淡入。
    • 淡

  • 入淡出不应该发生在每个滚动事件上，而应该只在 Scrolltop> 500 时发生一次

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

使用这个

$(function() {
    var logo = $(".lrg-logo");
    var scrolling = false;
    var small = false;
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 500 && !scrolling && !small) {
            scrolling = true;
            logo.fadeOut(300);
            window.setTimeout(function() {
                logo.fadeIn( 300).removeClass('lrg-logo').addClass("sml-logo");
                scrolling = false;
                small = true;
            }, 300);
        } else if(!scrolling && small) {
            scrolling = true;
            logo.fadeOut( 300);
            window.setTimeout(function() {
                logo.fadeIn( 300).removeClass('sml-logo').addClass("lrg-logo");
                scrolling = false;
                small = false;
            }, 300);
        }
    });
});

我有两个旗帜。一个看看它当前是否动画。另一个检查它是小还是大。

http://codepen.io/anon/pen/jEGNbN

代码在上面的链接中

相关文章：