javascript - 汉堡包菜单中断收缩标题(反之亦然)

Question

仍然有问题，任何帮助都会很棒。

我有一个汉堡菜单(参见此处:http://codepen.io/Dingerzat/pen/zKXARr)，我想使用缩小的标题(参见此处:http://codepen.io/Nickies/pen/ZYwJZM)。将两个代码直接放在一起并没有奏效。缩小的标题和调整大小的 Logo 在滚动时停止工作。

我不确定是什么原因造成的。任何建议都会很棒。

在下面发布我的组合版本的代码:codepen.io/Dingerzat/pen/XjQQWZ

(function() {

  var $navUL = $('nav ul');

  $('.hamburger-menu').on('click', function() {

    $(this).toggleClass('show');
    $navUL.toggleClass('hidden');

  });

})();

function init() {
  window.addEventListener('scroll', function(e) {
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 300,
      header = document.querySelector("header");
    if (distanceY > shrinkOn) {
      classie.add(header, "smaller");
    } else {
      if (classie.has(header, "smaller")) {
        classie.remove(header, "smaller");
      }
    }
  });
}
window.onload = init();

@import "compass/css3";
 $bar-width:50px;
 $bar-height:4px;
 $bar-spacing:15px;
 body {
  background: #000000;
  font-family: Teko;
  color: #ffffff;
}
.hamburger-menu {
  position: fixed;
  z-index: 1;
  top: 45px;
  left: 45px;
  margin: auto;
  width: $bar-width;
  height: $bar-height + $bar-spacing*2;
  cursor: pointer;
}
.text {
  margin-left: 60px;
  font-size: 18px;
  letter-spacing: .05em;
  color: #ffffff;
  -webkit-transform: translateX(0);
  transition: all 350ms ease-in-out;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}
.show .text {
  opacity: 0;
  transform: translateX(-10px);
}
.bar,
.bar:after,
.bar:before {
  width: $bar-width;
  height: $bar-height;
}
.bar {
  position: relative;
  z-index: 1;
  transform: translateY($bar-spacing);
  background: rgba(188, 49, 254, 1);
  transition: all 0ms 300ms;
  .show & {
    background: rgba(255, 255, 255, 0);
  }
}
.bar:before {
  content: "";
  position: fixed;
  z-index: 1;
  left: 0;
  bottom: $bar-spacing;
  background: rgba(188, 49, 254, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
  content: "";
  position: fixed;
  z-index: 1;
  left: 0;
  top: $bar-spacing;
  background: rgba(188, 49, 254, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
  top: 0;
  transform: rotate(45deg);
  background: rgba(0, 0, 0, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  ;
}
.show .bar:before {
  bottom: 0;
  transform: rotate(-45deg);
  background: rgba(0, 0, 0, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  ;
}
.overlay {
  position: fixed;
  border-style: solid;
  border-width: 1em;
  border-color: black;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #333;
  background-color: #bc31fe;
}
nav ul,
li {
  margin: 0;
  padding: 0;
  font-family: Teko;
  font-weight: bold;
  font-size: 0.8em;
  list-style: none;
  text-align: center;
}
nav ul {
  position: fixed;
  top: 50%;
  text-align: center;
  &.hidden {
    display: none;
  }
  a {
    @include transition-duration(0.5s);
    text-decoration: none;
    color: white;
    font-size: 3em;
    line-height: 1.5;
  }
}
nav ul li {
  display: inline;
  margin: 0 0.5rem;
}
.overlay .contacts {
  position: fixed;
  bottom: 37px;
  left: 0;
  right: 0;
  padding-bottom: 15px;
  text-align: center;
  letter-spacing: .01em;
  z-index: 2;
}
.contacts {
  font-size: 16px;
  line-height: 1.5;
  color: #10131a;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}
.bigtext {
  font-size: 50em;
}
header {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #0683c9;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}
header h1#logo {
  display: inline-block;
  height: 150px;
  line-height: 150px;
  float: center;
  font-family: "Oswald", sans-serif;
  font-size: 60px;
  color: white;
  font-weight: 400;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header nav {
  display: inline-block;
  float: right;
}
header nav a {
  line-height: 150px;
  margin-left: 20px;
  color: #9fdbfc;
  font-weight: 700;
  font-size: 18px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header nav a:hover {
  color: white;
}
header.smaller {
  height: 75px;
}
header.smaller h1#logo {
  width: 150px;
  height: 75px;
  line-height: 75px;
  font-size: 30px;
}
header.smaller nav a {
  line-height: 75px;
}
@media all and (max-width: 660px) {
  header h1#logo {
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  header nav {
    display: block;
    float: none;
    height: 50px;
    text-align: center;
    margin: 0 auto;
  }
  header nav a {
    line-height: 50px;
    margin: 0 10px;
  }
  header.smaller {
    height: 75px;
  }
  header.smaller h1#logo {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
  }
  header.smaller nav {
    height: 35px;
  }
  header.smaller nav a {
    line-height: 35px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">

<header>
  <div class="container clearfix">
    <h1 id="logo">
                LOGO
            </h1>
    <div class="hamburger-menu">
      <div class="bar"></div>
      <div class="text">MENU</div>
    </div>
  </div>
</header>
<!-- /header -->

<nav>
  <ul role="navigation" class="overlay hidden">
    <li><a href="#">WORK</a>
    </li>
    <li><a href="#">ABOUT</a>
    </li>
    <li><a href="#">RESUME</a>
    </li>
    <li><a href="#">CONTACT</a>
    </li>
  </ul>
</nav>

<div class="contacts">
  <address>someperson@somewhere.com</address>
</div>

<div class="bigtext">THIS IS PLACEHOLDER</div>

Answer 1

您的代码笔中缺少 classie 脚本。在此处查看工作示例 http://codepen.io/object505/pen/Vmwwwo