Question

我正在为我的网站的移动版开发一个汉堡包菜单。您可以在此codepen上查看它的确切工作原理： http://codepen.io/terrorsaurusrex/pen/gluFh

如您所见，您点击汉堡菜单，带有链接的div向下扩展。如果滚动，div会折叠，菜单会返回初始状态。如果窗口滚动，这是告诉div崩溃的脚本：

$(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。有没有办法重写这个脚本，以便汉堡包只在窗口垂直滚动时折叠，并在水平滚动时保持不变？

由于

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');
      }
    }
  });

仅在垂直滚动时隐藏/折叠div

1 个答案:

codepen demo