javascript - 使用CSS创建滚动动画

Question

我正在尝试创建一个标题菜单，当我向下滚动它以将动画卷入一个圆圈时，当它向上滚动时它将再次返回。我检查了窗口是否位于顶部，如果不是则使用 javascript 进行动画处理。但是我的代码不起作用。

$header = $('.header__fake');

$(window).scroll(function() {

    var scroll = $(window).scrollTop();

    if (scroll > 20) {
        $header.addClass('animated').removeClass('fix');
    } else {
        $header.removeClass('animated').addClass('fix');
    }
  
});

body {
  background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
  font-weight:lighter;
  letter-spacing:1px;
}

.content {
  width: 320px;
  position: relative;
  margin: 0 auto;
}

.content h2 {
  margin: 35px 0 0;
}

.content h1 {
  text-align: center;
  margin: 1000px 0 200px;
}

.content h1 span {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  opacity: .5;
}

.content .header__fake {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -160px;
  width: 320px;
}

.content .header__fake i {
  display: block;
}

.content .header__fake .btm__border {
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}

.content .header__fake .icn__wrap {
  cursor: pointer;
  float: right;
  width: 58px;
  position: relative;
  height: 58px;
  margin-right: -20px;
}

.content .header__fake .icn__wrap .icn__hamburger {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-6px);
  -ms-transform: translateX(-50%) translateY(-6px);
  transform: translateX(-50%) translateY(-6px);
  display: block;
  width: 18px;
  height: 1px;
  z-index: 999;
  background: #fff;
}

.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
  content: "";
  float: left;
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  margin: 5px 0 0;
}

.content .header__fake .icn__wrap .icn__hamburger:before {
  margin: 6px 0 0;
}

.content .header__fake .icn__wrap svg {
  z-index: 10;
}

.content .header__fake .icn__wrap svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: -39;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.animated .btm__border {
  left: 100%;
  right: 4px;
}

.content .header__fake.animated svg circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.fix .btm__border {
  -webkit-animation: fix 0.2s linear;
  animation: fix 0.2s linear;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  right: 5px;
}

@-webkit-keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0px;
  }
}

@keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0px;
  }
}

    <div class="content">

        <h2>Scroll to see the magic.</h2>

        <div class="header__fake">

            <div class="icn__wrap">
                <i class="icn__hamburger"></i>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                    <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
                </svg>
            </div>
            <i class="btm__border"></i>

        </div>


        <h1>Hmm<span>Now scroll back up.</span></h1>

    </div>

Answer 1

我在 JSfiddle 中粘贴了上面的代码。它工作得很好。看吧here

问题可能出在您的 jQuery 库初始化上。