jquery - 叠加层启动后，汉堡包切换页面滚动

Question

我有一个基本的 jQuery 脚本，它会在单击汉堡包时切换叠加层和导航菜单。这一切都很好，但在导航菜单出现后，汉堡包图标与覆盖层后面的主体一起滚动，我希望它固定在此处，或禁用主体滚动。我知道它正在发生，因为在汉堡包图标上使用的position:relative位置与所需位置冲突:固定，但我看不出如何解决它。

也许 toggleClass 是解决这个问题的糟糕方法？提前致谢!

$('.burger').on('click', function(e) {
$('.overlay').toggleClass("hidden");
e.preventDefault();

});

查看此处的代码:http://codepen.io/anon/pen/yOOwpd

Answer 1

如果你点击汉堡，你可以切换 class。

$('.burger').on('click', function(e) {
	$('.overlay').toggleClass("hidden");
  $(this).toggleClass('BurgerClick');
	e.preventDefault();
});

header {
  height: 100px;
}

nav {
	float: right;
}

.burger {
	outline: none;
	z-index: 99;
	display: block;
	margin-top: 2.5em;
	width: 60px;
	height: 45px;
	float: right;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}
.BurgerClick{
  position: fixed;
  right: 10px;
}

.burger span {
	display: block;
	position: absolute;
	height: 6px;
	width: 70%;
	background: #900;
	border-radius: 9px;
	opacity: 1;
	top: 0;
	right: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.burger span:nth-child(1) {
	top: 0px;
}

.burger span:nth-child(2) {
	top: 15px;
}

.burger span:nth-child(3) {
	top: 30px;
}

.burger.open-burger span:nth-child(1) {
	top: 18px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

.burger.open-burger span:nth-child(2) {
	opacity: 0;
}

.burger.open-burger span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

nav ul {
	list-style-type: none;
	margin: 0 auto;
}

nav ul li {
	text-align: center;
}

nav ul li a {
	letter-spacing: 1px;
	font-size: 90%;
}

.hidden {
	display: none;
}

.overlay {
	z-index: 9;
	position: fixed;
	top: 0; bottom: 0;
	left: 0; right: 0;
	background-color: rgba(0,0,0,0.95);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <a href="#" class="burger">
    <span></span>
    <span></span>
    <span></span>
  </a>

  <nav class="overlay hidden">
    <ul>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum sit amet risus vitae suscipit. Nam eget lacus in ipsum convallis lacinia vel nec ligula. Phasellus ut gravida felis, et eleifend eros. Praesent a eros consectetur lorem ultricies maximus suscipit quis velit. Sed porttitor, mauris eu accumsan imperdiet, nunc est ultricies mauris, commodo accumsan orci nibh nec lorem. Donec vel luctus quam. Duis porttitor diam arcu, a feugiat ipsum interdum at. Aenean nec auctor eros. Sed auctor nisl at lacus pretium, vel blandit quam porttitor. Cras et felis suscipit nisi malesuada luctus quis nec dui. Aenean ultricies tellus eu nisl efficitur, quis maximus enim rhoncus. Aliquam ut tellus faucibus, laoreet metus fringilla, aliquet sapien. Curabitur aliquam vitae odio in fringilla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</p>Nunc finibus, dolor id vulputate scelerisque, nibh eros tempus ante, eu accumsan neque metus sed tellus. Vestibulum a sapien lorem. Aliquam sed finibus nunc. Cras posuere arcu id magna pellentesque, quis aliquam nibh dignissim. Quisque lobortis nulla nec sem consectetur fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus cursus augue, id venenatis lectus tristique ac. Suspendisse vel elit mi. Sed turpis ex, luctus et vulputate nec, dictum non diam. Fusce sed aliquam eros, nec vulputate ligula. Phasellus fringilla, leo eu dapibus fermentum, ipsum quam hendrerit justo, non tempus dui sapien nec lectus. Fusce tellus augue, vulputate et dolor lobortis, auctor consequat velit. Nulla id quam quis arcu rutrum tincidunt.</p>

<p>Praesent sit amet ex non mauris congue tincidunt nec blandit dui. Morbi ultricies sem quis suscipit condimentum. Nullam finibus nisl purus, sit amet imperdiet dui tristique ut. Fusce sed lectus lectus. Etiam malesuada congue quam in posuere. Phasellus ultrices dolor dictum venenatis ultrices. Sed sollicitudin tristique pellentesque. Mauris arcu ligula, feugiat a erat vel, ullamcorper fringilla odio. Nulla facilisi. Vestibulum maximus nisl non orci dictum, nec malesuada nibh pretium.</p>

<p>Etiam vel eros eu nibh mattis luctus porttitor in mi. Cras nec laoreet risus. Vestibulum in porttitor urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam quis orci eu lectus egestas laoreet. Nullam facilisis vitae mauris ut pellentesque. Sed cursus metus et urna rhoncus vulputate. Aliquam erat volutpat. Aliquam nisi elit, porta at ante vel, porttitor luctus lectus. Quisque id odio dictum, euismod nisi quis, faucibus libero. Donec efficitur posuere vulputate. Praesent consectetur nisl id dictum porta. Phasellus aliquet, neque quis tincidunt auctor, dolor nunc gravida ante, in commodo arcu risus vitae orci. Nulla eget efficitur tellus.</p>

<p>In pellentesque a dolor at pretium. Quisque justo erat, porta non neque a, auctor consectetur est. Phasellus fringilla ullamcorper ex ac vehicula. Quisque pellentesque tellus est, eu placerat dolor sodales non. Curabitur tristique facilisis ultrices. Suspendisse non risus ac risus accumsan ultricies. Sed sollicitudin arcu consequat nunc porttitor ornare. Sed in turpis et turpis convallis commodo. Ut sit amet volutpat urna, nec hendrerit tellus. Integer et nisi massa. Ut molestie nisl ut turpis ornare euismod. Nulla vel nisi semper, eleifend velit ut, posuere magna. Fusce tortor tellus, lacinia ac mauris a, laoreet lobortis tellus. Curabitur in enim sit amet orci vestibulum fermentum ac ac ligula. Sed non ante molestie lectus efficitur placerat. Donec congue risus sapien, euismod iaculis purus aliquam non.</p>
</div>