Question

我的网站有问题，我不知道为什么我的代码不能在移动设备上运行。我使用了很多功能，如touchmove，onscroll但仍然无法正常工作。 im Jquery初学者。

$(window).on("scroll", function() {
  if ($(window).scrollTop() > 325) {
    $(".ONE-DAY-HAWAII-before").addClass("ONE-DAY-HAWAII-after");
  } else {
    $(".ONE-DAY-HAWAII-before").removeClass("ONE-DAY-HAWAII-after");
  }
});

*.ONE-DAY-HAWAII-before {
  position: relative;
  z-index: 10;
  transition: .3s ease;
}

*.ONE-DAY-HAWAII-after {
  position: fixed;
  top: 46px;
  z-index: 10;
  transition: .3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ONE-DAY-HAWAII-before">
  <div class="test1">
    Scroll Test Drive
  </div>
</div>

并且可能有一个代码使滚动事件不能在整个网站上运行？

Answer 1

以下是我对您所需内容的建议（我只是稍微更改了您的Y偏移值以使此示例适应代码段框架）：

＆＃13;

$(document).ready(function() {
  $(window).scroll(function(event) {
    var st = $(window).scrollTop();
    if (st > 100) {
      $(".ONE-DAY-HAWAII-before").addClass("ONE-DAY-HAWAII-after");
    } else {
      $(".ONE-DAY-HAWAII-before").removeClass("ONE-DAY-HAWAII-after");
    }
  });
});

＆＃13;

.ONE-DAY-HAWAII-before {
  position: relative;
  z-index: 1009;
  transition: .3s ease;
  background-color: lavender;
}

.ONE-DAY-HAWAII-after {
  position: fixed;
  top: 46px;
  z-index: 1009;
  transition: .3s ease;
  background-color: blanchedalmond;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h1>Header</h1>
    </div>
    <div data-role="content">

      <div class="ui-body ui-body-a ui-corner-all">
        <h3>Title 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="ONE-DAY-HAWAII-before">
        <div class="test1">
          Scroll Test Drive
        </div>
      </div>
      <div class="ui-body ui-body-a ui-corner-all">
        <h3>Title 2</h3>
        <p>Proin at dolor leo. Duis id vehicula tellus. Donec ornare tincidunt dui sed placerat.</p>
      </div>
      <div class="ui-body ui-body-a ui-corner-all">
        <h3>Title 3</h3>
        <p>Aenean vel felis volutpat, euismod enim vel, vestibulum justo. Donec accumsan nulla id est faucibus sagittis. Nunc hendrerit finibus sollicitudin. Duis in vestibulum odio. Nulla aliquam, orci sit amet facilisis scelerisque, libero odio vestibulum
          libero, quis imperdiet justo leo sit amet felis. Nam a risus convallis tellus consectetur efficitur a ac erat. Integer eu magna dignissim, luctus ipsum eget, posuere diam. Mauris tellus nibh, fringilla nec pulvinar vitae, accumsan venenatis
          nulla. Maecenas nec lacinia sapien. Proin nec lacus leo. Ut tincidunt ante in nisi vehicula commodo. Mauris vel elit blandit, molestie velit sed, placerat justo. </p>
      </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
      <h1>Footer</h1>
    </div>
  </div>
</body>

</html>

＆＃13;

您可以在移动设备上进行测试，并再次询问是否需要更多解释。

jquery Scroll Event无法在移动设备上运行

1 个答案: