javascript - jQuery 窗口 .scroll 功能障碍-6ren

javascript - jQuery 窗口 .scroll 功能障碍

转载作者：行者123 更新时间：2023-11-30 15:17:16

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

视差 CSS 和菜单 jQuery 分开时工作得很好，但结合起来时就会出现功能障碍。

我通过将其记录在控制台中并将其缩小到 window.scroll 并看到任何时候鼠标指针在滚动时悬停在主要内容框架 (.parallax) 上，没有记录任何内容。有什么方法可以确保记录窗口的属性和滚动位置，而不管正文部分中有什么？

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;
    });
  });

});

@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>

编辑:

我已经更改了我的 JS .scroll 命令以专注于 .parallax div，因为这确实是应该测量的内容，现在它的日志记录也很好。但是单击侧面菜单中的元素仍然会滚动到相应位置，就好像它具有整个事物的 30% View 一样。

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

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

scrollTop 和 offsetTop 结果似乎不对。我想弄清楚，但我很慢。任何帮助将不胜感激。

最佳答案

所以，你需要听 .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();
});

There is still a small glitch on the appearance of the menus (top and side)...
That is because you use opacity instead of display to control show/hide.
That also is the source of the white band at the bottom of the page.

I left some work for you ;)

查看 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>

关于javascript - jQuery 窗口 .scroll 功能障碍，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44292812/

文章推荐： javascript - 无法在此 Div 之外调用函数

文章推荐： c - 如何在不循环的情况下扫描并比较数组中的值

文章推荐： c# - 将类的列表传递给方法，方法中使用抽象基类的列表作为参数

jquery - CoffeeScript 与 jQuery、jQuery ($) 和 jQuery
在带有 jQuery 的 CoffeeScript 中，以下语句有什么区别吗？ jQuery ($) -> jQuery -> $ - > 最佳答案第一个与其他两个不同，就像在纯 JavaScr
jquery - jQuery 为什么叫 jQuery？名字的由来是什么？
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭13 年前。 Improve th
jquery - jQuery 插件和 jQuery 小部件之间的区别？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
jquery - jQuery 生产和 jQuery 开发之间的区别？
这个问题可能听起来很愚蠢，但请耐心等待，因为我完全是初学者。我下载了两个 jQuery 版本，开发版本和生产版本。我想知道作为学习 jQuery 的初学者，什么更适合我。最佳答案如果您对 jQue
jquery - jQuery Mobile 使用什么版本的 jQuery？
The documentation说要使用 1.6.4，但我们现在已经升级到 1.7.2。我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗？最佳答案您当然可以，但如果您想
jquery - jquery 新手 - jquery 弹出
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。我只需要弹出和内联内容。你的回复有很大帮助。
jquery - 使用 jQuery 附加 jQuery
很明显我正在尝试做一些 jQuery 不喜欢的事情。我正在使用 javascript 上传图片。每次上传图片时，我都希望它可见，并附加一个有效的删除脚本。显示工作正常，删除则不然，因为当我用 fir
jquery - jQuery 数组和 jQuery 对象之间的技术区别是什么？
这两个哪个是正确的？ jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
jquery - if (jQuery)(function ($) { . . .})(jQuery);插件格式
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
jquery - 使用哪个版本的 jQuery/jQuery UI？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
jQuery + jQuery 表单提交插件 + jQuery 验证插件
我知道这个问题已经被问过几次了，但想知道您是否可以帮助我解决这个问题。背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好，然后我想在表单上得到验证。我可以使用
jquery - jquery 元数据插件和 jquery 验证插件的主要烦恼
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。我正在使用此功能。当验证查找这些规则时，它会对元素进
jquery - 使用 jQuery 还是不使用 jQuery？
我更喜欢为我一直在开发的网络社区添加实用的视觉效果，但随着事情开始堆积，我担心加载时间。拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery？是否使用 jQuery
jquery - 有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery Mobile
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
jquery - XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 之间有什么区别
我如何找出最适合某种情况的方法？任何人都可以提供一些示例来了解功能和性能方面的差异吗？最佳答案 XMLHttpRequest 是原始浏览器对象，jQuery 将其包装成一种更有用和简化的形式以及跨浏
jquery - 为什么我在 Assets 安装时无法解析 'jQuery=jquery'？
运行时 php bin/console oro:assets:build ，我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
jquery - jQuery.ajax 在 jQuery 源代码中的哪里定义？
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是，使用 grep 似乎不起作用。在哪里？谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
jquery - 从单独的 jQuery 对象创建 jQuery 对象集合
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
jquery - jQuery.one() 和 jQuery.on() 之间的区别
我的页面上有多个图像。为了检测损坏的图像，我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
jquery - jQuery 如何实现将 $ 设为 jQuery 函数的别名？
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦，尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名？这是第一个问题。其

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery 窗口 .scroll 功能障碍