javascript - 修复了在手机上向下滚动时显示的 div

Question

我网站上的固定菜单有问题。这个想法是它在向下滚动 200px (#menu) 后保持在顶部。所以我创建了一个仅在 200px (#menu-scroll) 之后显示的附加菜单，并在向上滚动时消失。所有这一切都与我找到的 js 解决方案有关，而且效果很好。现在的问题是网站的移动版本。现在，在我的手机上向下滚动 200px 后，始终显示为 none 的 div 出现了。我需要的是激活#menu-scroll 的代码在移动设备上不再起作用，因此 div 在显示时保持不可见:它没有。我想答案是在 js 中，但我不知道 js。所以，请提供任何帮助。

jsfiddle:jsfiddle.net/695q9tdx/

我的网站(尝试在手机上观看): http://armandorodriguez.pe/uh/

谢谢。

Answer 1

那么你可以做的是在页面加载时设置它，如果它是移动/平板设备甚至不创建滚动事件监听器。

实现此目的的最简单方法是使用随 JS Navigator 对象发送的 user-agent 字符串。

// This function checks if the userAgent property matches any
// of the typical mobile/tablet devices, separated by the pipeline '|'
// character. 
// If no matches are found, the .match function returns null
// So if (null == null) or (null != null) then we can have a 
// simple boolean return value
function isDesktop() {
  var regexStr = /Android|webOS|iPhone|iPod|iPad|Blackberry/i;
  return (navigator.userAgent.match(regexStr) == null)
}

现在，如果您在页面加载中包含该函数作为控制 scroll 事件逻辑的方式，您几乎可以在桌面/移动设备上禁用该操作:

// Now that we have a way to check if the client is on a Desktop
// on page load, we can setup a scroll event listener only if 
// he/she isn't on a tablet/mobile device.
if (isDesktop()) {

  // **ANYTHING** wrapped within the function(){} statement
  // parameter you pass into the $(x).scroll() function **WILL**
  // get executed on each event fire, so you can include multiple
  // logic checks or functions within it. 
  // Keep in mind though, the more weight added into an event fire
  // can cause lag on the client side, which is why I recommend 
  // adding an event decoupler in the future
  $(window).scroll(function(){
    if ($(window).scrollTop() > 200) {
      $("#menu-scroll").fadeIn("fast");
    }
    else if ($(window).scrollTop() < 200) {
      $("#menu-scroll").fadeOut("fast");
    }
  });
}

我建议在 #menu-scroll 中添加/删除一些特殊的类名，以便在用户正在访问时不经常调用 fadeIn 或 fadeOut滚动。这样，当您监听滚动事件时，您实际上可以添加逻辑以仅如果它们具有相反的类名则淡入或淡出。

另外，还有一个注意事项。这只会像我在页面加载中所说的那样起作用。页面加载后，如果您将浏览器调整为更小的宽度或测试不同的设备(即使用 Chrome 开发者工具)，将不会启用监听器。