Hide/Collapse div 仅垂直滚动时

Question

我正在为我的网站的移动版本开发一个汉堡包菜单。您可以在这个 codepen 上确切地看到它是如何工作的： http://codepen.io/terrorsaurusrex/pen/gluFh

如您所见，您单击汉堡菜单，带有链接的 div 向下展开。如果滚动，div 会折叠，菜单 returns 会恢复到初始状态。这是告诉 div 在滚动 window 时折叠的脚本：

$(window).scroll(function(event) //AUTOMATICALLY HIDES THE NAV WHEN SCROLLING STARTS
{
  if($("#"+slideNavName).attr('class')=="revealed") //SEE IF YOUR NAV IS OPEN
  {
    //CHANGE ICON BACK INTO A HAMBURGER
    $("#"+rectangleName+"1").toggleClass(showRect+" "+topRectX);
    $("#"+rectangleName+"2").toggleClass(showRect+" "+hideRectX);
    $("#"+rectangleName+"3").toggleClass(showRect+" "+bottomRectX);

    //HIDE YOUR NAVIGATION
    $("#"+slideNavName).toggleClass('revealed hidden');
  }
});

我希望在按下汉堡包按钮时出现的 div 中放置一个可水平滚动的 div。有没有办法重写此脚本，使汉堡包 div 仅在 window 仅垂直滚动时折叠，而在水平滚动时保持不变？

谢谢

Answer 1

codepen demo

描述

简单检测滚动是水平还是垂直，如果是水平则忽略滚动任务。

JS

//THIS WAS MADE WITH LOTS OF VARIABLES, SO YOU CAN NAME THINGS HOWEVER YOU LIKE
//IF YOU UNDERSTAND JS AND JQUERY, YOU SHOULD BE ABLE TO PICK THIS APART HOW YOU SEE FIT

var hamburger = "hamb"; //THIS IS THE NAME OF YOUR HAMBURGER BUTTON

var slideNavName = "slideDown"; //THIS IS THE NAME OF YOUR HIDING NAVIGATION

var rectangleName = "rect"; //THIS IS THE NAME OF YOUR LITTLE HAMBURGER RECTANGLES, MINUS THE NUMBERS (SEE CSS COMMENTS)

//YOU MAY CHANGE ALL OF THESE IF YOU NEED TO (SEE CSS COMMENTS)
var showRect = "showRect";
var topRectX = "topRectX";
var hideRectX = "hideRectX";
var bottomRectX = "bottomRectX";
var prevLeftPosition = 0;

$("#" + hamburger).click(function(event) //CHECK IF YOUR BUTTON IS PRESSED
  {
    if ($("#" + slideNavName).attr('class') == "hidden") //CHECKS TO SEE IF YOUR MENU IS CURRENTLY CLOSED
    {
      //CHANGE ICON TO AN 'X'
      $("#" + rectangleName + "1").toggleClass(showRect + " " + topRectX);
      $("#" + rectangleName + "2").toggleClass(showRect + " " + hideRectX);
      $("#" + rectangleName + "3").toggleClass(showRect + " " + bottomRectX);

      //REVEAL YOUR NAVIGATION
      $("#" + slideNavName).toggleClass('hidden revealed');
    } else if ($("#" + slideNavName).attr('class') == "revealed") //CHECKS TO SEE IF YOUR MENU IS CURRENTLY OPEN
    {
      //CHANGE ICON BACK INTO A HAMBURGER
      $("#" + rectangleName + "1").toggleClass(showRect + " " + topRectX);
      $("#" + rectangleName + "2").toggleClass(showRect + " " + hideRectX);
      $("#" + rectangleName + "3").toggleClass(showRect + " " + bottomRectX);

      //HIDE YOUR NAVIGATION
      $("#" + slideNavName).toggleClass('revealed hidden');
    }
  });

//BONUS!!! AN OPENED NAV DISSAPEARS WHEN SCROLLING!!

$(window).scroll(function(event) //AUTOMATICALLY HIDES THE NAV WHEN SCROLLING STARTS
  {
    var horizontalScroll = false;
    var currentLeft = $(this).scrollLeft();
    if (prevLeftPosition != currentLeft) {
      prevLeftPosition = currentLeft;
      horizontalScroll = true;
    }
  console.log(horizontalScroll);
    if ($("#" + slideNavName).attr('class') == "revealed") //SEE IF YOUR NAV IS OPEN
    {
      if (!horizontalScroll) {
        //CHANGE ICON BACK INTO A HAMBURGER
        $("#" + rectangleName + "1").toggleClass(showRect + " " + topRectX);
        $("#" + rectangleName + "2").toggleClass(showRect + " " + hideRectX);
        $("#" + rectangleName + "3").toggleClass(showRect + " " + bottomRectX);

        //HIDE YOUR NAVIGATION
        $("#" + slideNavName).toggleClass('revealed hidden');
      }
    }
  });

Hide/Collapse div 仅垂直滚动时

Hide/Collapse div when only scrolling vertically

html

jquery

scroll

hide

codepen demo