jQuery窗口.scroll功能障碍

时间：2017-05-31 19:03:37

标签： javascript jquery css

我在这里包含了整个代码，它是一个视差网站（所有css）的骨骼，带有滚动菜单（jQuery），根据div ID显示当前位置。

视差CSS和菜单jQuery在分离时工作得很好，但组合时会出现功能障碍。

我将它缩小到window.scroll，将其记录在控制台中，并且在滚动时看到鼠标指针悬停在主内容框架（.parallax）上时，没有记录任何内容。有没有办法确保记录窗口的属性和滚动位置，无论身体部分是什么？

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
  console.log('got here');
  jQuery(window).scroll(function() {
    console.log('Log this');
  });
});

$(document).ready(function() {

  var debugInput = document.querySelector("input");

  function updateDebugState() {
    document.body.classList.toggle('debug-on', debugInput.checked);
  }
  debugInput.addEventListener("click", updateDebugState);
  updateDebugState();

  var lastId,
    sideMenu = $(".ssb00"),
    menuItems = sideMenu.find("a"),
    scrollItems = menuItems.map(function() {
      var item = $($(this).attr("href"));
      if (item.length) {
        return item;
      }
    });

  menuItems.click(function(e) {
    var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top;
    $(window).stop().animate({
      scrollTop: offsetTop
    }, 300);
    e.preventDefault();
  });

  $(window).scroll(function() {
    var fromTop = $(this).scrollTop();

    var cur = scrollItems.map(function() {
      if ($(this).offset().top < fromTop)
        return this;
    });
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
      lastId = id;
      menuItems
        .parent().removeClass("active")
        .end().filter("[href='#" + id + "']").parent().addClass("active");
    }
  });

  $(function() {

    var scroll = 0;
    $(window).scroll(function(event) {
      var moved = $(this).scrollTop();
      var headerSize = 20
      if (moved > headerSize) {
        $('.ssb00').css({
          'opacity': '1',
          'right': '10px'
        })
        $('.ssb01').css({
          'opacity': '0',
        })
      }

      if (moved === 0) {
        $('.ssb00').css({
          'opacity': '0',
          'right': '-40px'
        })
        $('.ssb01').css({
          'opacity': '1',
        })
      }
      if (moved > headerSize) {}
      headerSize = moved;
    });
  });

});
＆＃13; 
@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

.ssb00 {
  z-index: 100;
  position: absolute;
  width: 100px;
  height: 100%;
  top: 100px;
  opacity: 0;
}

#menLogo {
  z-index: 110;
  position: fixed;
  top: 0;
  left: 8px;
  height: 100px;
  width: 100px;
  background-image: url(img/Logo-300x244.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ssb00_inWrap {
  height: 200px;
  position: relative;
  top: calc(50vh - 150px);
}

.m00 {
  height: 33px;
}

.m00 div {
  position: absolute;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.m01 {
  text-align: left;
  right: 0;
  width: 16px;
}

.m01:before {
  content: '•';
}

.m02 {
  left: 200px;
  width: calc(100% - 26px);
  opacity: 0;
  text-align: right;
}

.ssb00_inWrap:hover .m02 {
  left: 0px;
  opacity: 1;
}

.ssb00 a {
  color: #fff;
}

.ssb00 a:hover {
  color: #6ccef5;
}

.active .m02 {
  left: 0px;
  opacity: 1;
}

.active a {
  color: #1b75ba;
}

.ssb01 {
  z-index: 100;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid #f0f0f0;
  height: 100px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ssb01 .nav {
  font-weight: bold;
  width: 560px;
  height: 30px;
  position: absolute;
  right: 0;
  bottom: 10px;
  text-align: left;
}

.ssb01 a {
  color: #1b75ba;
  text-decoration: none;
  margin: 0px 15px;
}

.ssb01 a:hover {
  color: #6ccef5;
}

.ssb01 a:active {
  color: #fff;
}

.ssb01__info {
  position: absolute;
  height: 45px;
  padding: 14px 20px;
  left: 110px;
  top: 15px;
  color: #666;
  opacity: 1;
}

.trans {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.parallax__group {
  position: relative;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}

.debug {
  position: fixed;
  top: 0;
  left: .5em;
  z-index: 999;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: .5em;
  border-radius: 0 0 5px 5px;
}

.debug-on .parallax__group {
  -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
  transform: translate3d(700px, 0, -800px) rotateY(30deg);
}

.debug-on .parallax__layer {
  box-shadow: 0 0 0 2px #000;
  opacity: 0.9;
}

.parallax__group {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.parallax {
  font-size: 200%;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#Xabout {
  z-index: 3;
  /* slide under groups 1 and 3 */
}

#Xabout .parallax__layer--back {
  background: #6ba1ff;
}

#aboutGal {
  z-index: 5;
  /* slide over group 2 */
}

#aboutGal .parallax__layer--base {
  background: #c4daff;
}

#Xconcept {
  z-index: 3;
  /* slide under groups 1 and 3 */
}

#Xconcept .parallax__layer--back {
  background: #7ae570;
}

#conceptGal {
  z-index: 4;
  /* slide over group 2 and 4 */
}

#conceptGal .parallax__layer--base {
  background: #adffa5;
}

#Xbroadcast {
  z-index: 2;
  /* slide under group 3 and 5 */
}

#Xbroadcast .parallax__layer--back {
  background: #f0f760;
}

#broadcastGal {
  z-index: 3;
  /* slide over group 4 and 6 */
}

#broadcastGal .parallax__layer--base {
  background: #fcffbc;
}

#Xdigital {
  z-index: 2;
  /* slide under group 5 and 7 */
}

#Xdigital .parallax__layer--back {
  background: #42e2f4;
}

#digitalGal {
  z-index: 3;
  /* slide over group 7 */
}

#digitalGal .parallax__layer--base {
  background: #aaf6ff;
}

#Xdesign {
  z-index: 2;
  /* slide under group 5 and 7 */
}

#Xdesign .parallax__layer--back {
  background: #e59172;
}

#designGal {
  z-index: 3;
  /* slide over group 7 */
}

#designGal .parallax__layer--base {
  background: #ffe1d6;
}

#Xcontact {
  z-index: 2;
  /* slide under group 5 and 7 */
}

#Xcontact .parallax__layer--back {
  background: rgb(245, 235, 100);
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div class="debug">
    <label><input type="checkbox"> Debug</label>
  </div>

  <div id="menLogo"></div>
  <div class="ssb01 trans">
    <div class="ssb01__info">
      <span>bill o'day</span>
      <br />
      <span>creative director | art</span>
    </div>
    <div class="nav">
      <a href="#about">About</a>
      <a href="#concept">Concept</a>
      <a href="#broadcast">Broadcast</a>
      <a href="#digital">Digital</a>
      <a href="#design">Design</a>
      <a href="#contact">Contact</a>
    </div>
  </div>

  <div class="ssb00 trans">
    <div class="ssb00_inWrap">
      <div class="m00 men-1 active">
        <a href="#about">
          <div class="m01 mm-1"></div>
          <div class="m02 mm-1">About</div>
        </a>
      </div>
      <div class="m00 men-2 active">
        <a href="#concept">
          <div class="m01 mm-2"></div>
          <div class="m02 mm-2">Concept</div>
        </a>
      </div>
      <div class="m00 men-3 active">
        <a href="#broadcast">
          <div class="m01 mm-3"></div>
          <div class="m02 mm-3">Broadcast</div>
        </a>
      </div>
      <div class="m00 men-4 active">
        <a href="#digital">
          <div class="m01 mm-4"></div>
          <div class="m02 mm-4">Digital</div>
        </a>
      </div>
      <div class="m00 men-5 active">
        <a href="#design">
          <div class="m01 mm-5"></div>
          <div class="m02 mm-5">Design</div>
        </a>
      </div>
      <div class="m00 men-6 active">
        <a href="#contact">
          <div class="m01 mm-6"></div>
          <div class="m02 mm-6">Contact</div>
        </a>
      </div>
    </div>
  </div>



  <div class="parallax">
    <div id="Xabout" class="parallax__group">
      <div id="about" class="parallax__layer parallax__layer--base">
        <div class="title">hello</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">ABOUT BG</div>
      </div>
    </div>

    <div id="aboutGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">ABOUT GAL</div>
      </div>
    </div>


    <div id="Xconcept" class="parallax__group">
      <div id="concept" class="parallax__layer parallax__layer--base">
        <div class="title">concepts</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Concepts BG</div>
      </div>
    </div>
    <div id="conceptGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">CONCEPTS GAL</div>
      </div>
    </div>


    <div id="Xbroadcast" class="parallax__group">
      <div id="broadcast" class="parallax__layer parallax__layer--base">
        <div class="title">broadcast</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">BROADCAST BG</div>
      </div>
    </div>
    <div id="broadcastGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">BROADCAST GAL</div>
      </div>
    </div>


    <div id="Xdigital" class="parallax__group">
      <div id="digital" class="parallax__layer parallax__layer--base">
        <div class="title">digital</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">DIGITAL BG</div>
      </div>
    </div>
    <div id="digitalGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">DIGITAL GAL</div>
      </div>
    </div>

    <div id="Xdesign" class="parallax__group">
      <div id="design" class="parallax__layer parallax__layer--base">
        <div class="title">design</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">DESIGN BG</div>
      </div>
    </div>
    <div id="designGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">DESIGN GAL</div>
      </div>
    </div>

    <div id="Xcontact" class="parallax__group">
      <div id="contact" class="parallax__layer parallax__layer--base">
        <div class="title">contact</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">CONTACT BG</div>
      </div>
    </div>

  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

编辑：

我已经改变了我的JS .scroll命令，专注于.parallax div，因为它确实应该被测量，现在它记录得很好。但是点击侧面菜单中的项目仍然会滚动到位置，就好像它有30％的整体视图。

所以我认为现在的问题尤其在于这一行：

 offsetTop = href === "#" ? 0 : $(href).offset().top;

scrollTop和offsetTop结果似乎已关闭。我想弄明白但是我很慢。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分：2)

那么，你需要听.parallax向右滚动吗？ 而你没试过这个？

$(".parallax").scroll(function() {    // Added, just to console.log the scroll events.
  console.log('Log this Parallax');
});

<小时/> 在你的脚本中，我摆脱了多个ready包装器。

$(document).ready(function() {与$(function() {相同 一个是另一个的简写。
像这样的多个后续包装器是无用的......也是嵌套的。

<小时/> 我也更改了这个（这就是在滚动备份时修复你的侧边菜单偏移）：

$(".parallax").scroll(function() {        // Changed $(window) to $(".parallax")
  var fromTop = $(window).scrollTop();    // Changed $(this) to $(window)
  // ...

我还修复了侧面菜单链接点击处理程序，如下所示：

menuItems.click(function(e) {
  var href = $(this).attr("href");    // changed the coma to a semi-colon.
  var offsetTop = href.offset().top;  // Added var and removed the useless ternary operator:  href === "#" ? 0 : $(href).offset().top;
  $(".parallax").stop().animate({     // Changed $(window") to $(".parallax")
    scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});
  

菜单外观（顶部和侧面）仍有小故障......
  这是因为您使用opacity代替display来控制显示/隐藏   这也是页面底部白色乐队的来源   
  我为你留下了一些工作;）

在CodePen和以下代码段上查看（但点击“整页”链接）。

$(document).ready(function() {
  console.log('got here');
  $(window).scroll(function() {
    //console.log('Log this');
  });
  $(".parallax").scroll(function() {    // Added, just to console.log the scroll events.
    //console.log('Log this Parallax');
  });
  //});

  //$(document).ready(function() {

  var debugInput = document.querySelector("input");

  function updateDebugState() {
    document.body.classList.toggle('debug-on', debugInput.checked);
  }
  debugInput.addEventListener("click", updateDebugState);
  updateDebugState();

  var lastId,
      sideMenu = $(".ssb00"),
      menuItems = sideMenu.find("a"),
      scrollItems = menuItems.map(function() {
        var item = $($(this).attr("href"));
        if (item.length) {
          return item;
        }
      });

  menuItems.click(function(e) {
    var href = $(this).attr("href");    // changed the coma to a semi-colon.
    var offsetTop = href.offset().top;  // Added var and removed the useless ternary operator:  href === "#" ? 0 : $(href).offset().top;
    $(".parallax").stop().animate({     // Changed $(window") to $(".parallax")
      scrollTop: offsetTop
    }, 300);
    e.preventDefault();
  });

  $(".parallax").scroll(function() {        // Changed $(window) to $(".parallax")
    var fromTop = $(window).scrollTop();    // Changed $(this) to $(window)

    var cur = scrollItems.map(function() {
      if ($(this).offset().top < fromTop)
        return this;
    });
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
      lastId = id;
      menuItems
        .parent().removeClass("active")
        .end().filter("[href='#" + id + "']").parent().addClass("active");
    }
  });

  //$(function() {

  var scroll = 0;
  $(window).scroll(function(event) {
    var moved = $(this).scrollTop();
    var headerSize = 20
    if (moved > headerSize) {
      $('.ssb00').css({
        'opacity': '1',
        'right': '10px'
      })
      $('.ssb01').css({
        'opacity': '0',
      })
    }

    if (moved === 0) {
      $('.ssb00').css({
        'opacity': '0',
        'right': '-40px'
      })
      $('.ssb01').css({
        'opacity': '1',
      })
    }
    if (moved > headerSize) {}
    headerSize = moved;
  });
  //});

});
@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

.ssb00 {
  z-index: 100;
  position: absolute;
  width: 100px;
  height: 100%;
  top: 100px;
  opacity: 0;
}

#menLogo {
  z-index: 110;
  position: fixed;
  top: 0;
  left: 8px;
  height: 100px;
  width: 100px;
  background-image: url(img/Logo-300x244.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ssb00_inWrap {
  height: 200px;
  position: relative;
  top: calc(50vh - 150px);
}

.m00 {
  height: 33px;
}

.m00 div {
  position: absolute;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.m01 {
  text-align: left;
  right: 0;
  width: 16px;
}

.m01:before {
  content: '•';
}

.m02 {
  left: 200px;
  width: calc(100% - 26px);
  opacity: 0;
  text-align: right;
}

.ssb00_inWrap:hover .m02 {
  left: 0px;
  opacity: 1;
}

.ssb00 a {
  color: #fff;
}

.ssb00 a:hover {
  color: #6ccef5;
}

.active .m02 {
  left: 0px;
  opacity: 1;
}

.active a {
  color: #1b75ba;
}

.ssb01 {
  z-index: 100;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid #f0f0f0;
  height: 100px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ssb01 .nav {
  font-weight: bold;
  width: 560px;
  height: 30px;
  position: absolute;
  right: 0;
  bottom: 10px;
  text-align: left;
}

.ssb01 a {
  color: #1b75ba;
  text-decoration: none;
  margin: 0px 15px;
}

.ssb01 a:hover {
  color: #6ccef5;
}

.ssb01 a:active {
  color: #fff;
}

.ssb01__info {
  position: absolute;
  height: 45px;
  padding: 14px 20px;
  left: 110px;
  top: 15px;
  color: #666;
  opacity: 1;
}

.trans {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.parallax__group {
  position: relative;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}

.debug {
  position: fixed;
  top: 0;
  left: .5em;
  z-index: 999;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: .5em;
  border-radius: 0 0 5px 5px;
}

.debug-on .parallax__group {
  -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
  transform: translate3d(700px, 0, -800px) rotateY(30deg);
}

.debug-on .parallax__layer {
  box-shadow: 0 0 0 2px #000;
  opacity: 0.9;
}

.parallax__group {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.parallax {
  font-size: 200%;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#Xabout {
  z-index: 3;
  /* slide under groups 1 and 3 */
}

#Xabout .parallax__layer--back {
  background: #6ba1ff;
}

#aboutGal {
  z-index: 5;
  /* slide over group 2 */
}

#aboutGal .parallax__layer--base {
  background: #c4daff;
}

#Xconcept {
  z-index: 3;
  /* slide under groups 1 and 3 */
}

#Xconcept .parallax__layer--back {
  background: #7ae570;
}

#conceptGal {
  z-index: 4;
  /* slide over group 2 and 4 */
}

#conceptGal .parallax__layer--base {
  background: #adffa5;
}

#Xbroadcast {
  z-index: 2;
  /* slide under group 3 and 5 */
}

#Xbroadcast .parallax__layer--back {
  background: #f0f760;
}

#broadcastGal {
  z-index: 3;
  /* slide over group 4 and 6 */
}

#broadcastGal .parallax__layer--base {
  background: #fcffbc;
}

#Xdigital {
  z-index: 2;
  /* slide under group 5 and 7 */
}

#Xdigital .parallax__layer--back {
  background: #42e2f4;
}

#digitalGal {
  z-index: 3;
  /* slide over group 7 */
}

#digitalGal .parallax__layer--base {
  background: #aaf6ff;
}

#Xdesign {
  z-index: 2;
  /* slide under group 5 and 7 */
}

#Xdesign .parallax__layer--back {
  background: #e59172;
}

#designGal {
  z-index: 3;
  /* slide over group 7 */
}

#designGal .parallax__layer--base {
  background: #ffe1d6;
}

#Xcontact {
  z-index: 2;
  /* slide under group 5 and 7 */
}

#Xcontact .parallax__layer--back {
  background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div class="debug">
    <label><input type="checkbox"> Debug</label>
  </div>

  <div id="menLogo"></div>
  <div class="ssb01 trans">
    <div class="ssb01__info">
      <span>bill o'day</span>
      <br />
      <span>creative director | art</span>
    </div>
    <div class="nav">
      <a href="#about">About</a>
      <a href="#concept">Concept</a>
      <a href="#broadcast">Broadcast</a>
      <a href="#digital">Digital</a>
      <a href="#design">Design</a>
      <a href="#contact">Contact</a>
    </div>
  </div>

  <div class="ssb00 trans">
    <div class="ssb00_inWrap">
      <div class="m00 men-1 active">
        <a href="#about">
          <div class="m01 mm-1"></div>
          <div class="m02 mm-1">About</div>
        </a>
      </div>
      <div class="m00 men-2 active">
        <a href="#concept">
          <div class="m01 mm-2"></div>
          <div class="m02 mm-2">Concept</div>
        </a>
      </div>
      <div class="m00 men-3 active">
        <a href="#broadcast">
          <div class="m01 mm-3"></div>
          <div class="m02 mm-3">Broadcast</div>
        </a>
      </div>
      <div class="m00 men-4 active">
        <a href="#digital">
          <div class="m01 mm-4"></div>
          <div class="m02 mm-4">Digital</div>
        </a>
      </div>
      <div class="m00 men-5 active">
        <a href="#design">
          <div class="m01 mm-5"></div>
          <div class="m02 mm-5">Design</div>
        </a>
      </div>
      <div class="m00 men-6 active">
        <a href="#contact">
          <div class="m01 mm-6"></div>
          <div class="m02 mm-6">Contact</div>
        </a>
      </div>
    </div>
  </div>



  <div class="parallax">
    <div id="Xabout" class="parallax__group">
      <div id="about" class="parallax__layer parallax__layer--base">
        <div class="title">hello</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">ABOUT BG</div>
      </div>
    </div>

    <div id="aboutGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">ABOUT GAL</div>
      </div>
    </div>


    <div id="Xconcept" class="parallax__group">
      <div id="concept" class="parallax__layer parallax__layer--base">
        <div class="title">concepts</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Concepts BG</div>
      </div>
    </div>
    <div id="conceptGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">CONCEPTS GAL</div>
      </div>
    </div>


    <div id="Xbroadcast" class="parallax__group">
      <div id="broadcast" class="parallax__layer parallax__layer--base">
        <div class="title">broadcast</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">BROADCAST BG</div>
      </div>
    </div>
    <div id="broadcastGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">BROADCAST GAL</div>
      </div>
    </div>


    <div id="Xdigital" class="parallax__group">
      <div id="digital" class="parallax__layer parallax__layer--base">
        <div class="title">digital</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">DIGITAL BG</div>
      </div>
    </div>
    <div id="digitalGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">DIGITAL GAL</div>
      </div>
    </div>

    <div id="Xdesign" class="parallax__group">
      <div id="design" class="parallax__layer parallax__layer--base">
        <div class="title">design</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">DESIGN BG</div>
      </div>
    </div>
    <div id="designGal" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">DESIGN GAL</div>
      </div>
    </div>

    <div id="Xcontact" class="parallax__group">
      <div id="contact" class="parallax__layer parallax__layer--base">
        <div class="title">contact</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title">CONTACT BG</div>
      </div>
    </div>

  </div>

</body>

</html>

相关问题
最新问题