时间戳

首页 > 解决方案 > 用于移动设备的 jQuery 滚动事件

html - 用于移动设备的 jQuery 滚动事件

问题描述

我有一个相当简单的代码，当用户开始向下滚动页面时，它会将导航栏的背景颜色从透明更改为白色。我使用 jQuery 来实现该操作，当用户开始滚动时向 div 添加一个类。

但是，在这种情况下，滚动操作在手机/平板电脑 (iPhone/iPad) 上不起作用。

谁能指出我正确的方向？

jQuery：

<script>
  $(function() {
      $(window).on("scroll", function() {
          if($(window).scrollTop() > 50) {
              $("#menuholder").addClass("active");
                $("#menuwaves").addClass("active");
          } else {
              
             $("#menuholder").removeClass("active");
             $("#menuwaves").removeClass("active");
          }
      });
  });
</script>

CSS

#menuholder.active {
  background-color: #f0ecea;
}
#menuholder{
  width: 100%;
  min-width: 1200px;
  height: 85px;
  padding: 15px;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 2;
}

HTML

<body>
<div id="menuholder">

<img src="healthwavelogo.png" class="menu_logo"></img>


<div class="mobile_menu">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>


<div class="menu_options">
<div><a href="#">#HEALTHTECH</a></div>
<div><a href="">SOLUTIONS</a></div>
<div><a href="">PROJECTS</a></div>
<div><a href="">ABOUT</a></div>
<div><a href="">CONTACT</a></div>
</div>

</div>
<div id="menuwaves"></div>

标签： htmljquerycssiphonemobile

解决方案

推荐阅读