每当我向下滚动并点击汉堡包图标时，固定位置的标题就会移到最顶部

时间：2019-04-19 16:18:18

标签： javascript html css

我有一个固定的响应标题，每当我单击汉堡菜单时，主要内容就会向左滑动，菜单就会从右侧显示。但是，每当我向下滚动页面并单击“汉堡包”菜单时，固定标题将转到页面的顶部。 

header {
    background: #232323;
    position: fixed;
    width: 100%;
    top: 0;
    transition: .4s;
}

这是我的代码：

const menuSlide = ()=> {
  let navBtn = document.querySelector(".nav-btn");
  navBtn.addEventListener("click", ()=> {
    let mainContent = document.querySelector(".main-content");
    let navMobile = document.querySelector(".nav-mobile");
    let navBtnSpan = document.querySelector(".nav-btn span");
    navBtn.classList.toggle("toggle");
    mainContent.classList.toggle("main-content-slide");
    navMobile.classList.toggle("nav-mobile-slide");
  });
}

// Showcase Carousel
let images = [
  "https://www.tutorialrepublic.com/lib/images/javascript-illustration.png",
  "http://blog.creative-tim.com/wp-content/uploads/2017/03/AngularJS-e1487056257254-730x410.png",
  "https://miro.medium.com/max/1180/1*fsseXIPGEhwmg6kfgXyIjA.jpeg"
]


  let num = 0;
const showcaseSlide = ()=> {
let slider = document.querySelector(".showcase");

const slideNext = ()=> {
  num++;
  if(num >= images.length) {
    num = 0;
  }
  slider.style.background = "url('"+ images[num] + "')";
  }

  setInterval(slideNext,3000);
}

window.addEventListener("load",menuSlide);
window.addEventListener("load",showcaseSlide);
html, body {
  padding: 0;
  margin: 0;
}

body {
  font: 1rem/1.6 Arial, san-serif;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  width: 100%;
  transition: .5s;
}

header {
  background: #232323;
  position: fixed;
  width: 100%;
  top: 0;
  transition: .4s;
}

.header-slide {
  transform: translateX(-70%);
}

.main-header {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 70px;
}

.main-nav {
  display: flex;
}
.main-nav a {
  font-size: .85rem;
  display: block;
  color: #f2f2f2;
  padding: .5rem .8rem;
  margin-left: 1rem;
  border-radius: 6px;
}
.main-nav a:hover {
  background: #17A68A;
}

.nav-mobile {
  position: fixed;
  top: -1rem;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  padding-top: 4rem;
  transform: translateX(100%);
  background: #232323;
  transition: .5s;
}
.nav-mobile a {
  font-size: .85rem;
  display: inline-block;
  color: #f2f2f2;
  padding: .5rem .8rem;
  border-radius: 6px;
  margin: .5rem 0;
}
.nav-mobile a:hover {
  background: #17A68A;
}

.nav-mobile-slide {
  transform: translateX(30%);
}

.nav-btn {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
}

.nav-btn span,
.nav-btn span:before,
.nav-btn span:after {
  display: block;
  width: 100%;
  height: 3px;
  background: #f2f2f2;
  position: absolute;
  transition: .3s;
}

.nav-btn span:before {
  content: "";
  top: -10px;
}

.nav-btn span:after {
  content: "";
  top: 10px;
}

.nav-btn.toggle span {
  background: transparent;
}

.nav-btn.toggle span:before {
  transform: rotate(45deg);
  top: 0;
}

.nav-btn.toggle span:after {
  transform: rotate(-45deg);
  top: 0;
}

.a-active {
  background: #17A68A;
}

.showcase {
  height: 400px;
  background: url("https://www.tutorialrepublic.com/lib/images/javascript-illustration.png") center center no-repeat;
  background-size: cover;
}

.section {
  padding-top: 2rem;
  transition: .4s;
  color: #232323;
}
.section p {
  color: #5b5b5b;
}

.section-slide {
  transform: translateX(-70%);
}

.main-content-slide {
  transform: translateX(-70%);
}

@media screen and (max-width: 812px) {
  .nav-btn {
    display: flex;
  }

  .main-nav {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body class="master-content">
  <div class="main-content">
    <header class="header">
      <div class="container">
        <div class="main-header">
          <img src="https://www.sololearn.com/Icons/Courses/1076_web.png" alt="" class="logo">
          <ul class="main-nav">
            <li><a href="">Courses</a></li>
            <li><a class="a-active" href="">Code Playground</a></li>
            <li><a href="">Discuss</a></li>
            <li><a href="">Top Learners</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">My Codes <span></span></a></li>
          </ul>
          <div class="nav-btn">
            <span></span>
          </div>
        </div>
      </div>
    </header>
    <section class="showcase">
      
    </section>
    <div class="section">
      <div class="container">
        <h1>Javascript</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti rerum, iste adipisci unde optio ea voluptates incidunt sed illo, nisi perspiciatis, sint nam sequi inventore fugit totam dolores molestiae praesentium? Modi in asperiores amet error sed, reiciendis eligendi, placeat pariatur sunt deleniti delectus tempora, sequi obcaecati quibusdam ut expedita architecto non eum veritatis suscipit. Voluptatem ipsum architecto aperiam magni culpa est veritatis impedit ipsa corrupti eaque assumenda numquam molestias corporis, praesentium inventore fugit placeat porro modi natus molestiae! Doloremque, libero pariatur error laborum debitis velit quo quam vel harum iure nemo quos qui veritatis necessitatibus nihil cum at excepturi perspiciatis tempora unde. Eos officia perspiciatis laudantium quod. Nulla ipsum repellendus atque, hic itaque alias corporis debitis eius ab explicabo laboriosam, velit in est voluptates sapiente, sunt recusandae nam temporibus quas nihil corrupti suscipit doloribus dolor? Unde dolorum, laborum ratione, assumenda exercitationem repudiandae dicta perspiciatis reiciendis possimus dolores quasi quis sapiente. Sed natus deleniti nesciunt dicta exercitationem fugiat quisquam quae ratione illum doloremque veniam aliquid ex nulla ad quis voluptatem nihil, culpa, laudantium harum dolorem consectetur. Harum, sit magnam! Alias, necessitatibus repellendus eveniet illum aut placeat praesentium vel odio blanditiis veritatis! Aut explicabo molestias voluptatum sapiente beatae hic mollitia? Et necessitatibus reiciendis totam aspernatur vitae earum voluptas iure quasi debitis doloribus! Cumque ipsa at, eligendi explicabo amet dignissimos fuga numquam harum vitae consequatur non inventore pariatur iusto voluptas natus voluptate asperiores culpa, sint aspernatur reprehenderit laboriosam alias ut. Molestias, voluptas explicabo, quidem deserunt hic fugit, nulla laudantium dicta sequi beatae mollitia repellat perferendis eius sapiente natus maiores officia veritatis corrupti aperiam eaque rem quod? Ipsam, velit sed iste nisi deserunt repellat minima eligendi? Rerum, adipisci, asperiores quod excepturi inventore, ea pariatur laudantium modi accusamus doloribus sint illo error! Voluptates aliquam minus dolores, similique adipisci beatae quam vero eos alias excepturi explicabo exercitationem? Voluptas esse laudantium numquam reprehenderit! Vero nesciunt assumenda rerum, saepe ipsam qui corrupti laboriosam, officia blanditiis atque sint veniam aut quam recusandae! Harum aperiam, dolorem laboriosam corrupti alias maxime dignissimos officia perferendis atque aspernatur accusantium porro, repudiandae in? Sapiente id fugit incidunt repellendus veniam suscipit autem consectetur vitae itaque voluptatum natus, eligendi eveniet tenetur error iste facilis eaque cum magni obcaecati numquam ex fugiat nobis ea. Voluptatem nam nisi eaque optio accusantium, quaerat, facilis recusandae fugit perspiciatis quibusdam totam ex libero. Harum, labore. Itaque atque est perferendis obcaecati accusantium ducimus ut. Minima asperiores quod nam iure quidem nulla! Impedit.</p>
      </div>
    </div>
  </div> <!-- Main Content -->
  <ul class="nav-mobile">
    <li><a href="#">Courses</a></li>
    <li><a class="a-active" href="#">Code Playground</a></li>
    <li><a href="#">Discuss</a></li>
    <li><a href="#">Top Learners</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">My Codes <span></span></a></li>
  </ul>
</body>
</html>

谢谢！

0 个答案:

没有答案
相关问题
最新问题