Question

我是JS / jQuery的新手，这是我第一次为导航栏设置动画。
在学习了addClass / removeClass函数后，我接下来遇到了挑战。
我不知道fadeIn / fadeOut addClass / removeClass元素。
也许有人可以帮助我： - ）

import numpy as np

a = np.arange(20,-1,-1).reshape(21,1)
b = a+1 + a[::-1]*2
c = b+1 + a*2
d = np.hstack((a,b,c))
e = np.hstack((d,np.flip(d,0)+ d.shape[0] * d.shape[1]))
f = np.hstack((e,e + e.shape[0] * e.shape[1]))
del a,b,c,d,e

>>> f
array([[ 20,  21,  62,  63, 104, 105, 146, 147, 188, 189, 230, 231],
       [ 19,  22,  61,  64, 103, 106, 145, 148, 187, 190, 229, 232],
       [ 18,  23,  60,  65, 102, 107, 144, 149, 186, 191, 228, 233],
       [ 17,  24,  59,  66, 101, 108, 143, 150, 185, 192, 227, 234],
       [ 16,  25,  58,  67, 100, 109, 142, 151, 184, 193, 226, 235],
       [ 15,  26,  57,  68,  99, 110, 141, 152, 183, 194, 225, 236],
       [ 14,  27,  56,  69,  98, 111, 140, 153, 182, 195, 224, 237],
       [ 13,  28,  55,  70,  97, 112, 139, 154, 181, 196, 223, 238],
       [ 12,  29,  54,  71,  96, 113, 138, 155, 180, 197, 222, 239],
       [ 11,  30,  53,  72,  95, 114, 137, 156, 179, 198, 221, 240],
       [ 10,  31,  52,  73,  94, 115, 136, 157, 178, 199, 220, 241],
       [  9,  32,  51,  74,  93, 116, 135, 158, 177, 200, 219, 242],
       [  8,  33,  50,  75,  92, 117, 134, 159, 176, 201, 218, 243],
       [  7,  34,  49,  76,  91, 118, 133, 160, 175, 202, 217, 244],
       [  6,  35,  48,  77,  90, 119, 132, 161, 174, 203, 216, 245],
       [  5,  36,  47,  78,  89, 120, 131, 162, 173, 204, 215, 246],
       [  4,  37,  46,  79,  88, 121, 130, 163, 172, 205, 214, 247],
       [  3,  38,  45,  80,  87, 122, 129, 164, 171, 206, 213, 248],
       [  2,  39,  44,  81,  86, 123, 128, 165, 170, 207, 212, 249],
       [  1,  40,  43,  82,  85, 124, 127, 166, 169, 208, 211, 250],
       [  0,  41,  42,  83,  84, 125, 126, 167, 168, 209, 210, 251]])

我使用了removeClass / addClass，因为我想在滚动菜单中更改颜色/图像。我正在处理的导航菜单应该看起来像他们的：TimeZoneMapper
除了fadeIn / fadeOut，我得到了一切工作。

Answer 1

我尝试了一点，找到了解决方案：

.colorfade {
  height:100px;
  width: 100%;
  position: absolute;
  background-color: white;
  position: fixed;
  display: none;
  z-index: -1;
}


    $(window).scroll(function(){                          
        if ($(this).scrollTop() > 80) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt");
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
            $('.colorfade').fadeIn(500);
        } else {
            $('.navbar').removeClass("navbar-alt").addClass('.navbar').fadeIn(500);
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
            $('.colorfade').fadeOut(500);
        }
    });
});

Answer 2

首先，我必须说当用户使用鼠标滚轮或触摸幻灯片时，滚动事件是一个快速重复的事件，因此您不应经常添加和删除类，而不是每个滚动事件都没有意义！所以我除了滚动位置之外还添加了一个标准，用于测试之前是否设置了navbar或navbar-alt类。

对于颜色淡化效果，无需添加单独的块。您可以使用css过渡，因此当更改类时，样式将显示为css效果：

$(window).scroll(function(){                          
        if ( $(this).scrollTop() > 80 &&  $('.navbar').hasClass("navbar") ) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt");
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
        }

        if ( $(this).scrollTop() <= 80 &&  $('.navbar').hasClass("navbar-alt") ){
            $('.navbar').removeClass("navbar-alt").addClass('.navbar');
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
        }
    });

.navbar {
  height:80px;
  background-color:#666666;
  position:fixed;
  top:0;left:0;
  width:100%;
  transition: background-color 1s ease;
}

.navbar-alt{
  height:80px;
  background-color:#00ff00;
  position:fixed;
  top:0;left:0;
  width:100%;
  transition: background-color 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">&nbsp;</div>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
Now scroll up!<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>

使用add / removeClass导航菜单动画

2 个答案: