Question

我已经制作了一个响应式菜单，如果你继续使用手机，一切都会有所作为。我想要汉堡包图标滚动菜单链接，现在如果你滚动它只是停留在顶部，需要给hamburgericon一个固定点击的位置，如果它被点击再次返回到绝对位置

我尝试使用javascript和sass，如果它可以用纯css完成然后它的prerfect或者其他一些javascript就可以了

图标ID为#menutoggle＆lt; =需要设置此位置：固定在复选框上点击

＆＃13;

#header {
  transition: all 300 ms ease;
  font-size: 0.9em;
  font-weight: 300;
  background: black;
  margin: 0 auto;
  padding: 2em 0 1em;
  border-bottom: 4px solid red;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header {
    padding: 1em 0;
  }
}
@media only screen and (max-width: 767px) {
  #header {
    height: 4em;
    padding: 0;
  }
}
#header a {
  color: white;
}
#header .header-inner {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  height: 4em;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .header-inner {
    max-width: 768px;
    height: 3em;
  }
}
@media only screen and (max-width: 767px) {
  #header .header-inner {
    height: 4em;
    padding: 0 1em 1em;
  }
}
#header .navbar {
  top: 0;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  #header .navbar {
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
}
#header .navbar .leaf {
  transition: all 300ms ease;
  border-radius: 20px;
}
#header .navbar .leaf:hover {
  background: red;
}
#header .navbar .logo {
  margin: 1em 0;
  position: absolute;
  right: 360px;
  text-align: center;
  top: -38px;
  z-index: 5;
}
@media only screen and (max-width: 767px) {
  #header .navbar .logo {
    position: absolute;
    transform: translate(50%, 0px);
    margin: 0 auto;
    width: 60px;
    height: 50px;
    right: 50%;
    top: 5px;
    background: url("../images/crown.jpg.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .navbar .logo {
    margin: 0.5em 0;
    right: 280px;
    top: -20px;
  }
}
#header .navbar .logo img {
  background-position: contain;
  width: 300px;
}
@media only screen and (max-width: 767px) {
  #header .navbar .logo img {
    width: 135px;
    height: 50px;
    opacity: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .navbar .logo img {
    width: 225px;
  }
}
#header .navbar .menu {
  text-align: center;
  margin-top: 2em;
}
@media only screen and (max-width: 767px) {
  #header .navbar .menu {
    display: none;
  }
}
#header .navbar .menu ul {
  list-style-type: none;
}
#header .navbar .menu ul .video {
  margin-right: 345px;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .navbar .menu ul .video {
    margin-right: 260px;
  }
}
#header .navbar .menu li {
  display: inline;
  padding: 10px 1.2em;
  margin-right: 40px;
}
@media only screen and (min-width: 1024px) {
  #header .navbar .menu li {
    padding: 10px 1.2em;
    margin-right: 40px;
  }
}
#header .navbar .menu li:last-child {
  margin-right: 0px;
}
#header .navbar nav {
  display: none;
  transition: all 300ms ease;
  width: 100%;
  /* And let's fade it in from the left */
}
@media only screen and (max-width: 767px) {
  #header .navbar nav {
    display: block;
  }
}
#header .navbar nav a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease;
}
#header .navbar nav a:hover {
  color: red;
}
#header .navbar nav #menuToggle {
  display: block;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  top: 16px;
}
#header .navbar nav #menuToggle input {
  display: block;
  width: 55px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 12;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
#header .navbar nav #menuToggle ul a {
  width: 100;
  display: block;
  border-bottom: 1px solid rgba(215, 7, 120, 0.2);
}
#header .navbar nav #menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-left: 10px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 3;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
#header .navbar nav #menuToggle span:first-child {
  transform-origin: 0% 0%;
  margin-left: 10px;
}
#header .navbar nav #menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
  margin-left: 10px;
}
#header .navbar nav #menuToggle input:checked ~ span {
  opacity: 1;
  margin-left: 10px;
  transform: rotate(45deg) translate(-2px, -1px);
  background: red;
}
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(3) {
  margin-left: 10px;
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(2) {
  margin-left: 10px;
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}
#header .navbar nav #menu {
  position: absolute;
  width: 100%;
  padding: 50px;
  height: 100vh;
  top: 0;
  position: fixed;
  background: black;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#header .navbar nav #menu li {
  padding: 10px 0;
  font-size: 22px;
}
#header .navbar nav #menuToggle input:checked ~ ul {
  transform: scale(1, 1);
  opacity: 1;
  width: 100%;
  top: 0;
}

.blok {
  width: 100%;
  height: 1000px;
  background: blue;
}

＆＃13;

<body>
  <section id="home">
    <div id="header">
      <div class="header-inner">
        <div class="navbar">
          <div class="logo">
            <img src="" />
          </div>
          <div class="menu">
            <ul class="menu">
              <li class="leaf"><a title="" href="/photo">Home</a></li>
              <li class="leaf video"><a title="" href="/video">About</a></li>
              <li class="leaf"><a title="" href="/music">Menu</a></li>
              <li class="leaf"><a title="" href="/forum">Contact</a></li>
            </ul>
          </div>
          <nav role="navigation">
            <div id="menuToggle">
              <input type="checkbox" />
              <span></span>
              <span></span>
              <span></span>
              <ul id="menu">
                <a href="#">
                  <li>Home</li>
                </a>
                <hr class="line-menu">
                <a href="#">
                  <li>About</li>
                </a>
                <hr class="line-menu">
                <a href="#">
                  <li>Info</li>
                </a>
                <hr class="line-menu">
                <a href="#">
                  <li>Contact</li>
                </a>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <!--end header-->
    <!--begin header-->
    <div class="blok"></div>

＆＃13;

Answer 1

添加此代码

 @media only screen and(max-width: 767px) {
     #header {
         position: fixed;
         top: 0;
         width: 100% ;
     }
 }

Answer 2

JQ：

$(document).on('change', '.checkbox', function() {
     $('#menutoggle').toggleClass('position-style');
});

的CSS：

.position-style {
     position: fixed;
}

希望这能帮到你;]

//编辑https://jsfiddle.net/zfo5nzf3/ 这段代码正在运行，它正在添加＆＃39; .position＆＃39; class（其中规则是position：fixed;）根据你的＆＃34来对#menutoggle;图标id是#menutoggle＆lt; =需要这个位置：固定在复选框上点击＆＃34;。

如何在点击复选框后更改父级？

2 个答案: