Question

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

的jsfiddle： jsfiddle.net/695q9tdx /

我的网站（尝试在手机上观看）： http://armandorodriguez.pe/uh/

感谢。

Answer 1

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

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

// 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。这样，当您正在收听滚动事件时，如果它们具有相反的类名，您实际上可以将逻辑添加到仅淡入或淡出。

另外，还有一点需要注意。这只会像我在Page Load上所说的那样工作。加载页面后，如果您将浏览器调整为较小的宽度或测试不同的设备（即使用Chrome开发者工具），则不会启用监听器。

Answer 2

一个简单的解决方法是确定宽度断点并将其包含在js周围的if语句中。

/* set breakpoint for mobile device */
var breakpoint = 777px;

/* only execute menu code if larger than breakpoint */
if($(window).width() > breakpoint){

    $(window).scroll(function(){
      if($(window).scrollTop() > 200){
          $("#menu-scroll").fadeIn("fast");
      }
     });
     $(window).scroll(function(){
      if($(window).scrollTop() < 200){
          $("#menu-scroll").fadeOut("fast");
      }
    });
}

固定div显示在移动设备上向下滚动时

2 个答案: