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

我有一个基本的jQuery脚本，当单击汉堡包时，它将切换叠加和导航菜单。一切正常，但是在出现导航菜单后，汉堡图标滚动，使主体处于覆盖层后面，我希望将其固定在该位置，或禁用主体滚动。我知道这种情况的发生是因为在汉堡包图标上使用的position：relative与所需的position：fixed冲突，但是我看不到如何解决它。

也许toggleClass是解决此问题的不良方法？提前致谢！

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

}）;

在这里查看实际的代码：http://codepen.io/anon/pen/yOOwpd

最佳答案

如果您单击汉堡，则可以切换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>

关于jquery - 叠加层启动后，“汉堡包”切换页面滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35906179/