根据身高和点击量添加类别

问题描述 投票:0回答:1

您好,我试图根据视口的高度以及单击特定的切换按钮来更改svg路径的颜色。到目前为止,代码通过在达到50时更改颜色来起作用。我要尝试的是,当屏幕高于470时,它应该为白色(初始状态),但是通过单击切换按钮将颜色更改为黑色。

如果视口在470以下,它应该变为黑色,并且该拨动开关不起作用。因此,切换功能不应为类提供低于470的新背景色。仅应在470以上。

这就是我的jquery,它添加了一个基于视口的类,因此它可以更改颜色:

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 470) {
      $('.test').addClass('changeColor')
    }

    if ($(this).scrollTop() < 470) {
      $('.test').removeClass('changeColor')
    }
  });
});
.test {
  fill: white;
  transition: all ease-in .3s;
}

.changeColor {
  fill: black;
}

.changeColortwo {
  background-color: black;
}

svg {
  position: fixed;
}

body {
  height: 2000px;
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="clickable">This is a toggle</button>

<svg width="101px" height="39px" viewBox="0 0 101 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Website" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Home-Desktop" transform="translate(-60.000000, -11.000000)">
                <g id="Menu">
                    <g id="Logo" transform="translate(60.000000, 10.000000)">
                        <path class="test" d="M97.1859211,39.6344031 C97.0376923,39.6344031 96.9211538,39.5946941 96.8373279,39.5156183 C96.752139,39.4365426 96.7092038,39.3317929 96.7092038,39.1982884 C96.7092038,38.9466838 96.8686775,38.8210526 97.1859211,38.8210526 L98.9707996,38.8210526 C99.072004,38.8179718 99.1745715,38.7926401 99.2761167,38.7419769 C99.3783435,38.6923406 99.4686437,38.6245614 99.5487213,38.5393239 C99.6325472,38.4516902 99.6976316,38.3500214 99.7429521,38.2343175 C99.7886134,38.1172443 99.8124663,37.9919555 99.8124663,37.8553701 C99.8124663,37.5856226 99.7163731,37.357638 99.5258907,37.172101 C99.4434278,37.0913136 99.3469939,37.0307231 99.2417004,36.9896448 C99.1350439,36.9471973 99.0280466,36.9263158 98.9190047,36.9263158 L98.1761572,36.9263158 C97.9342206,36.9263158 97.7086404,36.8869491 97.4953273,36.8058194 C97.2820142,36.7250321 97.0980061,36.6127514 96.9415992,36.4658964 C96.7773549,36.3173299 96.6512753,36.1413778 96.560975,35.9383825 C96.4727193,35.7353872 96.427058,35.516303 96.427058,35.2818143 C96.427058,35.0425332 96.4727193,34.8124947 96.5640418,34.5920411 C96.6540013,34.3698759 96.780081,34.181258 96.9415992,34.0227642 C97.1010729,33.8608472 97.2871255,33.7359007 97.5004386,33.6472401 C97.7130702,33.5568678 97.9376282,33.512024 98.1761572,33.512024 L99.8172368,33.512024 C99.9688731,33.512024 100.085752,33.5469405 100.17026,33.6167736 C100.256471,33.6866068 100.298725,33.7851947 100.298725,33.9121951 C100.298725,34.0484382 100.256471,34.1535302 100.17026,34.2271288 C100.085752,34.3020967 99.9688731,34.3383825 99.8172368,34.3383825 L98.0085054,34.3383825 C97.8047335,34.3544715 97.6292443,34.4386821 97.4810155,34.5889602 C97.4067308,34.6666667 97.3484615,34.7621737 97.3062078,34.876166 C97.2632726,34.988789 97.2411235,35.1058622 97.2411235,35.2263586 C97.2411235,35.353359 97.2632726,35.4704322 97.3075709,35.5768935 C97.3535729,35.6830124 97.4145682,35.7781772 97.4953273,35.8623877 C97.5702935,35.943175 97.6544602,36.0051348 97.749531,36.0479247 C97.8456242,36.0924262 97.942058,36.112623 98.0415587,36.112623 L98.8276822,36.112623 C99.0713225,36.112623 99.3026957,36.1537013 99.5207794,36.2365426 C99.7398853,36.3193838 99.932753,36.4350877 100.099383,36.5867351 C100.268397,36.7421481 100.399588,36.9228926 100.492955,37.1310227 C100.584278,37.3384681 100.629939,37.5633718 100.629939,37.8094994 C100.629939,38.053573 100.584278,38.2866923 100.492955,38.5085152 C100.399588,38.7293111 100.270783,38.924433 100.103131,39.0908002 C99.9341161,39.2619598 99.7412483,39.3954643 99.5258907,39.4902867 C99.3108738,39.587163 99.0798414,39.6344031 98.8372233,39.6344031 L97.1859211,39.6344031 Z M76.8959615,38.7895593 C77.0121592,38.7895593 77.1252901,38.7655969 77.2353543,38.7169876 C77.3457591,38.6690629 77.4404892,38.6023107 77.518863,38.5146769 C77.5999629,38.431151 77.6630027,38.3339324 77.7069602,38.221994 C77.7512584,38.1103979 77.7747706,37.9950364 77.7747706,37.8741977 C77.7747706,37.7519897 77.7512584,37.6369705 77.7069602,37.5222935 C77.6630027,37.4100128 77.5999629,37.3100556 77.518863,37.2227642 C77.4404892,37.1371844 77.3457591,37.0687206 77.2353543,37.0201113 C77.1252901,36.9691057 77.0121592,36.9451433 76.8959615,36.9451433 L75.0269163,36.9451433 L75.0269163,38.7895593 L76.8959615,38.7895593 Z M76.8816498,36.0982456 C76.9920547,36.096534 77.0976889,36.0732563 77.1985526,36.0304664 C77.2980533,35.9856226 77.3866498,35.9257167 77.4636606,35.8480103 C77.5379453,35.7730424 77.5965553,35.6878049 77.637446,35.58819 C77.6786775,35.4896021 77.7008266,35.3834831 77.7008266,35.2725717 C77.7008266,35.1421481 77.6756107,35.0158323 77.6265418,34.8915704 C77.5778138,34.7679932 77.5113664,34.6666667 77.4275405,34.5889602 C77.3443961,34.5146769 77.2462584,34.4571673 77.133809,34.4140351 C77.0206781,34.3732991 76.9055027,34.3527599 76.7852159,34.3527599 L75.0269163,34.3527599 L75.0269163,36.0982456 L76.8816498,36.0982456 Z M74.5972233,39.6344031 C74.4810256,39.6344031 74.382888,39.5933248 74.3034919,39.5111682 C74.2254588,39.4300385 74.1859312,39.3300813 74.1859312,39.2112965 L74.1859312,33.9293111 C74.1859312,33.8673513 74.191724,33.8228498 74.2039912,33.7944373 L74.2312517,33.7341891 C74.2663495,33.6660676 74.3150776,33.6123235 74.3794804,33.5695336 C74.4438833,33.528113 74.516805,33.5058622 74.5972233,33.502439 L76.8503003,33.502439 C77.0772436,33.502439 77.2932827,33.5469405 77.4984177,33.6373128 C77.7035526,33.7266581 77.8848347,33.8516046 78.0415823,34.0087291 C78.3683671,34.3462559 78.5322706,34.7679932 78.5322706,35.2725717 C78.5322706,35.5101412 78.4849055,35.7370988 78.3884717,35.9476252 C78.2944231,36.1602054 78.1618691,36.3440308 77.9914912,36.4980745 C78.1942409,36.6723149 78.3540553,36.8773641 78.4678677,37.1118528 C78.5816802,37.3480531 78.6382456,37.6020539 78.6382456,37.8741977 C78.6382456,38.1090287 78.5939474,38.3339324 78.5026248,38.5495935 C78.4113023,38.7655969 78.2865857,38.9528455 78.1247267,39.1144202 C77.9659345,39.2777065 77.7792004,39.4064185 77.5679318,39.49816 C77.3566633,39.5885323 77.132446,39.6344031 76.8959615,39.6344031 L74.5972233,39.6344031 Z M55.1308704,37.0201113 L55.1308704,35.8955926 C55.1308704,35.668635 55.0978171,35.4608472 55.0334143,35.2712024 C54.9686707,35.0791613 54.8753036,34.9124519 54.7519501,34.7714163 C54.6330263,34.6317501 54.4854791,34.5239196 54.3116937,34.4496363 C54.1399528,34.3760377 53.9518556,34.3383825 53.7487652,34.3383825 C53.3442881,34.3383825 53.0205702,34.4735986 52.7772706,34.7426615 C52.6576653,34.876166 52.566002,35.038083 52.504666,35.2263586 C52.4426484,35.4149765 52.4112989,35.6261874 52.4112989,35.8572529 L52.4112989,37.0201113 L55.1308704,37.0201113 Z M51.9873988,39.6631579 C51.8701788,39.6631579 51.7706781,39.6234489 51.6902598,39.5440308 C51.6091599,39.4649551 51.5703138,39.3667095 51.5703138,39.2496363 L51.5703138,35.797347 C51.5703138,35.4848096 51.6193826,35.1883611 51.7154757,34.9090287 C51.8136134,34.6317501 51.9526417,34.3876765 52.1352868,34.181258 C52.32611,33.9642276 52.5564609,33.7961489 52.8249764,33.6770218 C53.0951957,33.5568678 53.3964238,33.4979889 53.7296829,33.4979889 C54.0752092,33.4979889 54.3873414,33.5568678 54.6674426,33.6770218 C54.9451586,33.7961489 55.1850506,33.9655969 55.385415,34.1843389 C55.5762382,34.4020539 55.7227632,34.6553701 55.8243084,34.9439452 C55.9261943,35.2342319 55.9769669,35.546427 55.9769669,35.8808729 L55.9769669,39.2496363 C55.9769669,39.3636286 55.9360762,39.4632435 55.8529318,39.5454001 C55.7684244,39.6234489 55.6706275,39.6631579 55.5557928,39.6631579 C55.4358468,39.6631579 55.3346424,39.6234489 55.2545648,39.5440308 C55.1721019,39.4649551 55.1308704,39.3667095 55.1308704,39.2496363 L55.1308704,37.8649551 L52.4112989,37.8649551 L52.4112989,39.2496363 C52.4112989,39.3667095 52.3704082,39.4649551 52.2899899,39.5440308 C52.2082085,39.6234489 52.1066633,39.6631579 51.9873988,39.6631579 Z M30.1105398,39.6344031 C30.1071323,39.6344031 30.1054285,39.6326915 30.1054285,39.6296106 L30.0962281,39.6296106 C29.9980904,39.6138639 29.916309,39.5697047 29.8515655,39.4950792 C29.7864811,39.4204536 29.7547908,39.3331622 29.7547908,39.2301241 L29.7547908,33.916303 C29.7547908,33.7978605 29.7943185,33.7006418 29.8723516,33.62362 C29.9507254,33.5455712 30.0471592,33.5075738 30.1609717,33.5075738 C30.2761471,33.5075738 30.372581,33.5455712 30.4526586,33.62362 C30.5334177,33.7006418 30.5729453,33.7978605 30.5729453,33.916303 L30.5729453,38.8162602 L33.1439474,38.8210526 C33.257419,38.8210526 33.3541937,38.8607617 33.4312045,38.9388104 C33.508556,39.014463 33.5463799,39.1113393 33.5463799,39.2253316 C33.5463799,39.3461703 33.508556,39.4444159 33.4312045,39.5204108 C33.3541937,39.5964056 33.257419,39.6344031 33.1439474,39.6344031 L30.1105398,39.6344031 L30.1105398,39.6344031 Z" id="labs" fill="#FFFFFF"></path>
                        <path class="test" d="M17.22861,10.5742405 C17.6259312,10.8049636 17.8845648,11.1373556 18.0222301,11.5669662 C18.1286737,11.9668378 18.0986712,12.3431215 17.9381579,12.6946707 L17.8613934,12.8438169 L15.9879184,16.1033804 C16.5658401,16.801027 17.0371053,17.5732991 17.3938765,18.4284125 C17.8590081,19.5269148 18.0852699,20.6880616 18.0852699,21.9193838 C18.0852699,23.4611896 17.6664811,24.9331622 16.9416937,26.2250749 C17.1059379,26.522208 17.260641,26.8261874 17.3938765,27.1455712 C17.8590081,28.2440736 18.0852699,29.4052204 18.0852699,30.6365426 C18.0852699,35.4919983 13.944747,39.6624733 9.10635628,39.6624733 C7.88747301,39.6624733 6.7374224,39.4355156 5.65041161,38.9685922 C5.17539811,38.7673085 4.72389676,38.529739 4.29897436,38.255199 C2.17742915,36.8838682 4.10338057,34.1268293 5.90768219,35.409157 C6.20925101,35.6234489 6.53944332,35.7963201 6.88837719,35.9445443 C7.57942982,36.241335 8.3209143,36.3929825 9.10635628,36.3929825 C9.90406545,36.3929825 10.6520243,36.241335 11.3495513,35.9445443 C12.0467375,35.6480958 12.6628239,35.2318357 13.1909953,34.6885751 C13.7184852,34.1583226 14.1267105,33.5462559 14.4156714,32.8520325 C14.7046323,32.1513051 14.8494534,31.4190843 14.8494534,30.6365426 C14.8494534,30.0576808 14.7683536,29.5041506 14.6081984,28.969448 C13.0720715,30.197347 11.1522537,30.9453145 9.10635628,30.9453145 C7.88747301,30.9453145 6.7374224,30.7183569 5.65041161,30.2514335 C4.56374157,29.7903295 3.60826248,29.139923 2.77272942,28.3005563 C1.93719636,27.4738554 1.28362686,26.5143346 0.818836032,25.4096705 C0.353704453,24.3050064 0.121309042,23.1435173 0.121309042,21.9193838 C0.121309042,20.7003851 0.353704453,19.5395807 0.818836032,18.4349166 C1.28362686,17.3302525 1.93719636,16.3642276 2.77272942,15.5245186 C3.60826248,14.6854942 4.56374157,14.0350877 5.65041161,13.5743261 C6.7374224,13.107745 7.88747301,12.8801027 9.10635628,12.8801027 C10.3313731,12.8801027 11.4943725,13.1139067 12.5939912,13.5808301 C12.7879948,13.6632149 12.9770007,13.752294 13.1618165,13.8467488 L13.4359987,13.9922978 L15.0372099,11.2054771 C15.269946,10.8011981 15.6004791,10.5410355 16.0243792,10.4225931 C16.4424865,10.3007274 16.8473043,10.3534446 17.22861,10.5742405 Z M40.0330061,12.8801027 C41.2587045,12.8801027 42.421363,13.1139067 43.520641,13.5808301 C44.619919,14.0474112 45.5750574,14.6978177 46.398664,15.5245186 C47.2212483,16.3642276 47.8625506,17.3302525 48.3208671,18.4284125 C48.7859987,19.5269148 49.0119197,20.6880616 49.0119197,21.9193838 C49.0119197,23.1561831 48.7859987,24.3176722 48.3208671,25.4158323 C47.8625506,26.5143346 47.2212483,27.4738554 46.398664,28.3005563 C45.5750574,29.1275995 44.619919,29.7773214 43.520641,30.2452717 C42.421363,30.7118528 41.2587045,30.9453145 40.0330061,30.9453145 C38.8144636,30.9453145 37.664413,30.7183569 36.5774022,30.2514335 C35.4903914,29.7903295 34.535253,29.139923 33.6993792,28.3005563 C32.8638462,27.4738554 32.2106174,26.5143346 31.7461673,25.4096705 C31.2803543,24.3050064 31.0479588,23.1435173 31.0479588,21.9193838 C31.0479588,20.7003851 31.2803543,19.5395807 31.7461673,18.4349166 C32.2106174,17.3302525 32.8638462,16.3642276 33.6993792,15.5245186 C34.535253,14.6854942 35.4903914,14.0350877 36.5774022,13.5743261 C37.664413,13.107745 38.8144636,12.8801027 40.0330061,12.8801027 Z M53.0965587,6.37192982 C53.5681646,6.37192982 53.9511741,6.5300813 54.2524022,6.85220368 C54.5485189,7.17364142 54.6987922,7.57141635 54.6987922,8.05134788 L54.6987922,16.3392383 C54.925054,15.8469833 55.2330972,15.3858793 55.6293961,14.9562687 C56.0308063,14.5335045 56.4894636,14.1675653 57.005027,13.858451 C57.5199089,13.5493368 58.0729555,13.3090287 58.6699595,13.1385537 C59.2604892,12.9680787 59.8643084,12.8801027 60.4606309,12.8801027 C61.6791734,12.8801027 62.8360391,13.1139067 63.9353171,13.5808301 C65.0288023,14.0474112 65.9900742,14.6978177 66.8133401,15.5245186 C67.6362652,16.3642276 68.276886,17.3302525 68.7362247,18.4284125 C69.2013563,19.5269148 69.4276181,20.6880616 69.4276181,21.9193838 C69.4276181,23.1435173 69.2013563,24.2988447 68.7362247,25.3970047 C68.276886,26.4955071 67.6362652,27.4543432 66.8133401,28.2817287 C65.9900742,29.1084296 65.0288023,29.7584938 63.9353171,30.2254172 C62.8360391,30.6930252 61.6791734,30.9268293 60.4606309,30.9268293 C59.248222,30.9268293 58.0920378,30.6930252 56.992419,30.2254172 C55.8924595,29.7584938 54.9315283,29.1084296 54.1147368,28.2817287 C53.2785223,27.4543432 52.6252935,26.4955071 52.1605027,25.3970047 C51.6953711,24.2988447 51.4633165,23.1435173 51.4633165,21.9193838 L51.4633165,8.05134788 C51.4633165,7.59674797 51.6200641,7.19315362 51.9403745,6.85220368 C52.2606849,6.5300813 52.6447166,6.37192982 53.0965587,6.37192982 Z M94.4789575,6.47941806 C94.9369332,6.47941806 95.3267578,6.63756953 95.6603576,6.94017972 C95.9929352,7.27496791 96.156498,7.67240051 96.156498,8.12700043 L96.156498,24.5446299 C96.156498,25.4979889 96.4141093,26.2302097 96.9225169,26.7477963 C97.4316059,27.265383 98.1291329,27.5241763 99.027365,27.5241763 C99.4921559,27.5241763 99.8761876,27.6816431 100.178097,27.984938 C100.479325,28.2940522 100.629939,28.6791613 100.629939,29.1337612 C100.629939,29.6006846 100.479325,29.9861361 100.190364,30.2884039 C99.8952699,30.5920411 99.5122605,30.7433462 99.0464474,30.7433462 L99.0089642,30.7433462 C98.1482152,30.7433462 97.3508468,30.5920411 96.6083401,30.3020967 C95.8665148,30.0046213 95.2197605,29.5760377 94.6670547,29.0201113 C94.1014001,28.4710312 93.6618252,27.8148053 93.3599157,27.0507488 C93.052554,26.2935387 92.8958063,25.4599914 92.8958063,24.5446299 L92.8958063,8.12700043 C92.8958063,7.66007702 93.052554,7.26846384 93.3599157,6.95284553 C93.6618252,6.63756953 94.0387011,6.47941806 94.4789575,6.47941806 Z M23.6838866,6.47941806 C24.1428846,6.47941806 24.5323684,6.63756953 24.8652868,6.94017972 C25.1978644,7.27496791 25.3614271,7.67240051 25.3614271,8.12700043 L25.3614271,24.5446299 C25.3614271,25.4979889 25.6193792,26.2302097 26.1281275,26.7477963 C26.6372166,27.265383 27.3344028,27.5241763 28.2329757,27.5241763 C28.6977665,27.5241763 29.0814575,27.6816431 29.3830263,27.984938 C29.6845951,28.2940522 29.8355499,28.6791613 29.8355499,29.1337612 C29.8355499,29.6006846 29.6845951,29.9861361 29.3952935,30.2884039 C29.1001991,30.5920411 28.7171896,30.7433462 28.252058,30.7433462 L28.2145749,30.7433462 C27.3534852,30.7433462 26.555776,30.5920411 25.81361,30.3020967 C25.0724663,30.0046213 24.4253711,29.5760377 23.8726653,29.0201113 C23.3070108,28.4710312 22.8667544,27.8148053 22.5655263,27.0507488 C22.2574831,26.2935387 22.1007355,25.4599914 22.1007355,24.5446299 L22.1007355,8.12700043 C22.1007355,7.66007702 22.2574831,7.26846384 22.5655263,6.95284553 C22.8667544,6.63756953 23.243971,6.47941806 23.6838866,6.47941806 Z M9.10635628,16.1875909 C8.3209143,16.1875909 7.57942982,16.3392383 6.88837719,16.6356868 C6.19119096,16.9259735 5.58123819,17.3429183 5.05374831,17.8731707 C4.52591768,18.4030809 4.11769231,19.0154899 3.82191633,19.7097133 C3.52682186,20.4104407 3.37586707,21.1423192 3.37586707,21.9193838 C3.37586707,22.7019255 3.52682186,23.433804 3.82191633,24.1348738 C4.11769231,24.8287548 4.52591768,25.4411639 5.05374831,25.9714163 C5.58123819,26.5143346 6.19119096,26.9309371 6.88837719,27.2273855 C7.57942982,27.5241763 8.3209143,27.6754814 9.10635628,27.6754814 C9.90406545,27.6754814 10.6520243,27.5241763 11.3495513,27.2273855 C12.0467375,26.9309371 12.6628239,26.5143346 13.1909953,25.9714163 C13.7184852,25.4411639 14.1267105,24.8287548 14.4156714,24.1348738 C14.7046323,23.433804 14.8494534,22.7019255 14.8494534,21.9193838 C14.8494534,21.1423192 14.7046323,20.4104407 14.4156714,19.7097133 C14.1267105,19.0154899 13.7184852,18.4030809 13.1909953,17.8731707 C12.6628239,17.3429183 12.0467375,16.9259735 11.3495513,16.6356868 C10.6520243,16.3392383 9.90406545,16.1875909 9.10635628,16.1875909 Z M40.0330061,16.1875909 C39.2479049,16.1875909 38.5064204,16.3392383 37.8153677,16.6356868 C37.1181815,16.9259735 36.5085695,17.3429183 35.9807389,17.8731707 C35.4525675,18.4030809 35.0443421,19.0154899 34.7492476,19.7097133 C34.4541532,20.4104407 34.3028576,21.1423192 34.3028576,21.9193838 C34.3028576,22.7019255 34.4541532,23.433804 34.7492476,24.1348738 C35.0443421,24.8287548 35.4525675,25.4411639 35.9807389,25.9714163 C36.5085695,26.5143346 37.1181815,26.9309371 37.8153677,27.2273855 C38.5064204,27.5241763 39.2479049,27.6754814 40.0330061,27.6754814 C40.8313968,27.6754814 41.5728812,27.5241763 42.2700675,27.2273855 C42.9614609,26.9309371 43.5707321,26.5143346 44.0985628,25.9714163 C44.6263934,25.4411639 45.0349595,24.8287548 45.3242611,24.1348738 C45.6128812,23.433804 45.7577024,22.7019255 45.7577024,21.9193838 C45.7577024,21.1423192 45.6128812,20.4104407 45.3242611,19.7097133 C45.0349595,19.0154899 44.6263934,18.4030809 44.0985628,17.8731707 C43.5707321,17.3429183 42.9614609,16.9259735 42.2700675,16.6356868 C41.5728812,16.3392383 40.8313968,16.1875909 40.0330061,16.1875909 Z M60.4606309,16.1875909 C59.6751889,16.1875909 58.9340452,16.3330766 58.2365182,16.6233633 C57.539332,16.9133077 56.9229049,17.3240907 56.395415,17.8540009 C55.8679251,18.3842533 55.4535661,18.9963201 55.163583,19.6908858 C54.8684885,20.3916132 54.7182152,21.1299957 54.7182152,21.9193838 C54.7182152,22.7019255 54.8684885,23.433804 55.163583,24.1348738 C55.4535661,24.8287548 55.8679251,25.4411639 56.395415,25.9714163 C56.9229049,26.5016688 57.539332,26.9117672 58.2365182,27.208558 C58.9340452,27.5050064 59.6751889,27.6569961 60.4606309,27.6569961 C61.2460729,27.6569961 61.993691,27.5050064 62.6915587,27.208558 C63.3890857,26.9117672 64.0044906,26.5016688 64.5316397,25.9714163 C65.0601518,25.4411639 65.4687179,24.8287548 65.7573381,24.1348738 C66.0466397,23.433804 66.1914609,22.7019255 66.1914609,21.9193838 C66.1914609,21.1299957 66.0466397,20.3916132 65.7573381,19.6908858 C65.4687179,18.9963201 65.0601518,18.3842533 64.5316397,17.8540009 C64.0044906,17.3240907 63.3890857,16.9133077 62.6915587,16.6233633 C61.993691,16.3330766 61.2460729,16.1875909 60.4606309,16.1875909 Z" id="global" fill="#FFFFFF"></path>
                        <g id="Bubble" transform="translate(70.451248, 0.342319)">
                            <path d="M14.0882051,21.8279846 C13.9914305,24.2389388 12.0051653,26.1754386 9.58239204,26.1754386 C7.09794197,26.1754386 5.07180837,24.1400086 5.07180837,21.6445015 C5.07180837,21.4565682 5.08407557,21.2713736 5.10588394,21.0896021 C8.19040486,19.5810013 11.1042072,22.8077022 14.0882051,21.8279846" id="Fill-11" fill="#16CDC7"></path>
                            <path d="M9.91735493,6.21001284 C8.83511471,6.21001284 7.95187584,7.09730424 7.95187584,8.18485237 C7.95187584,9.27274283 8.83511471,10.1600342 9.91735493,10.1600342 C11.0006174,10.1600342 11.8835155,9.27274283 11.8835155,8.18485237 C11.8835155,7.09730424 11.0006174,6.21001284 9.91735493,6.21001284" id="Fill-8" fill="#16CDC7"></path>
                            <path d="M8.45960189,2.67899016 C7.70142038,2.67899016 7.08328947,3.29961489 7.08328947,4.06093282 C7.08328947,4.82225075 7.70142038,5.44287548 8.45960189,5.44287548 C9.21676113,5.44287548 9.83523279,4.82225075 9.83523279,4.06093282 C9.83523279,3.29961489 9.21676113,2.67899016 8.45960189,2.67899016" id="Fill-9" fill="#16CDC7"></path>
                            <path d="M10.8943016,0.685665383 C10.367834,0.685665383 9.93916329,1.11664527 9.93916329,1.6445015 C9.93916329,2.17304236 10.367834,2.60402225 10.8943016,2.60402225 C11.419747,2.60402225 11.8484177,2.17304236 11.8484177,1.6445015 C11.8484177,1.11664527 11.419747,0.685665383 10.8943016,0.685665383" id="Fill-10" fill="#16CDC7"></path>
                            <path class="test" d="M9.58239204,30.6029953 C8.36316802,30.6029953 7.21959177,30.3760377 6.13871457,29.9091142 C5.05817814,29.4480103 4.10951417,28.7976038 3.28590756,27.9582371 C2.4626417,27.1315362 1.82168016,26.1720154 1.35688934,25.0735131 C0.898232119,23.975353 0.672651822,22.8138639 0.672651822,21.5770646 C0.672651822,20.3457424 0.898232119,19.1845956 1.35688934,18.0860933 C1.82168016,16.9879332 2.4626417,16.0219084 3.28590756,15.1821994 C4.10951417,14.343175 5.05817814,13.6927685 6.13871457,13.2320068 C6.71936235,12.9810869 7.31841093,12.8003423 7.93722335,12.6856654 L7.93722335,16.0855798 C7.7443556,16.1444587 7.55489541,16.2132649 7.3702058,16.2933676 C6.68528677,16.5836543 6.08180837,17.0005991 5.5665857,17.5308515 C5.05136302,18.0607617 4.64995277,18.6731707 4.35996964,19.3673941 C4.07203104,20.0681215 3.9268691,20.8 3.9268691,21.5770646 C3.9268691,22.3596063 4.07203104,23.0914848 4.35996964,23.7925546 C4.64995277,24.4864356 5.05136302,25.0988447 5.5665857,25.6290971 C6.08180837,26.1720154 6.68528677,26.5886179 7.3702058,26.8850663 C8.05512483,27.1818571 8.79626856,27.3331622 9.58239204,27.3331622 C10.3797605,27.3331622 11.1219265,27.1818571 11.806164,26.8850663 C12.4914238,26.5886179 13.100695,26.1720154 13.6281849,25.6290971 C14.1434076,25.0988447 14.5458401,24.4864356 14.8286673,23.7925546 C15.105361,23.0914848 15.2498414,22.3596063 15.2498414,21.5770646 C15.2498414,20.8 15.105361,20.0681215 14.8286673,19.3673941 C14.5458401,18.6731707 14.1434076,18.0607617 13.6281849,17.5308515 C13.100695,17.0005991 12.4914238,16.5836543 11.8000304,16.2933676 C11.612274,16.2136072 11.42111,16.144801 11.2268792,16.0859221 L11.2268792,12.6856654 C11.8416026,12.7986307 12.4372436,12.9762944 13.01278,13.2196834 C14.0868421,13.6801027 15.0355061,14.3175011 15.8594534,15.1448866 C16.6694298,15.9712452 17.3042578,16.9246042 17.762915,18.0100984 C18.2215722,19.0955926 18.4665756,20.2512623 18.4914507,21.4695764 L18.4914507,28.8294395 C18.4914507,29.2963629 18.3282287,29.6937955 18.0075776,30.0227642 C17.6940823,30.350706 17.2981242,30.5146769 16.8333333,30.5146769 C16.367861,30.5146769 15.9855331,30.350706 15.6894163,30.028926 C15.3943219,29.7129653 15.2498414,29.3090287 15.2498414,28.8294395 L15.2307591,28.5706461 C14.4446356,29.2207103 13.5716194,29.7256312 12.6103475,30.0795892 C11.6432827,30.4263586 10.6377126,30.6029953 9.58239204,30.6029953" id="Fill-7" fill="#FFFFFF"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg>

到目前为止,此功能可以正常使用,但click事件无效。我只是在脚本中添加了click事件,但是这一事件被忽略了。

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 470) {
      $('.test').addClass('changeColor')
       $(".clickable").click(function() { 
        $(this).addClass("changeColortwo");     
  });
    }

    if ($(this).scrollTop() < 470) {
      $('.test').removeClass('changeColor')
    }
  });
});

我到底在做什么错?

javascript jquery html css
1个回答
0
投票

应该是这样。因为一个事件不能在另一个事件中监听。

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 470) {
      $('.test').addClass('changeColor')
    }

    if ($(this).scrollTop() < 470) {
      $('.test').removeClass('changeColor')
    }
  });

  $(".clickable").click(function() {
    if ($(this).scrollTop() > 470) {
      $(this).addClass("changeColortwo");
    }
  });
});
© www.soinside.com 2019 - 2024. All rights reserved.