Как сделать пролистывание, чтобы открыть нижнее меню, в котором включено перетаскивание, используя jQuery? - PullRequest
Новая
       34

Как сделать пролистывание, чтобы открыть нижнее меню, в котором включено перетаскивание, используя jQuery?

0 голосов
/ 14 января 2020

Я пытаюсь скопировать android открывающее нижнее меню на веб-сайте ...

enter image description here

Как я не мог Я не нашел простой документации по молотку. js и нашел draggabilly. js легко, я попытался сделать меню с помощью этой библиотеки JS ...

Вот моя попытка:

  1. Оставьте Dragg ie включенным через draggie.enable();, когда меню закрыто.
  2. Когда меню открыто, и пользователь пролистывает меню, затем отключает перетаскивание ie с помощью draggie.disable(); и делает #navContent{overflow-y:scrollable}.
  3. Когда меню открыто, и пользователь проводит вверх по меню, затем отключает перетаскивание ie draggie.disable(); и сделать #navContent{overflow-y:hidden}.

Вот мой код: 

$(function() {
  var draggie = new Draggabilly('#bodyNav', {
    axis: 'y'
  });
  var menuFlag = 0;
  var dragFlag = 1;

  var vpH = Math.round($(window).innerHeight());
  var wH = Math.round($(window).outerHeight());
  var vpD = wH - vpH;
  var footH = Math.round($("#ypnFooter").outerHeight());

  var dragLowerLimit = Math.round($(window).innerHeight() * 0.8); //  Menu opens only if user drags the nav above this Limit...
  var dragUpperLimit = Math.round($(window).innerHeight() * 0.2); //  Menu closes only if user drags the nav above this Limit...
  var navClosedPos = Math.round($(window).innerHeight() - $("#navFooter").outerHeight()); //  Position of Closed Menu(Navbar) when the page loads...

  draggie.on('dragMove', function(event, pointer) {
    if (dragFlag === 1) {
      draggie.enable();
    }
    if (dragFlag === 0) {
      draggie.disable();
    }
  });

  draggie.on('dragEnd', function(event, pointer) {
    if (menuFlag === 0 && dragFlag === 1) {
      if (draggie.position.y < dragLowerLimit) {
        draggie.setPosition(0, 0);
        menuFlag = 1;
        $("body").addClass("NOscroll");
        $("html").addClass("NOscroll");
        dragFlag = 0;
      }
      if (draggie.position.y > dragLowerLimit) {
        draggie.setPosition(0, navClosedPos);
      }
    } else if (menuFlag === 1 && dragFlag === 1) {
      if (draggie.position.y < dragUpperLimit) {
        draggie.setPosition(0, 0);
      }
      if (draggie.position.y > dragUpperLimit) {
        draggie.setPosition(0, navClosedPos);
        menuFlag = 0;
        $("body").removeClass("NOscroll");
        $("html").removeClass("NOscroll");
      }
    }
  });
  draggie.on('pointerMove', function(event, pointer, dragAmount) {
    if (dragFlag === 0) {
      if ($("#navContent").scrollTop() === 0) {
        $("#navContent").addClass("NOscroll");
        $("#navContent").removeClass("scroll");
        if (dragAmount.y > 0) {
          dragFlag = 1;
        }
      }
      if ($("#navContent").scrollTop() > 0) {
        $("#navContent").addClass("scroll");
        $("#navContent").removeClass("NOscroll");
        if (dragAmount.y < 0) {
          dragFlag = 0;
        }
      }
    }
    if (dragFlag === 1) {
      if ($("#navContent").scrollTop() === 0) {
        if (dragAmount.y > 0) {
          dragFlag = 0;
        }
        if (dragAmount.y < 0) {
          dragFlag = 1;
        }
      }
    }
  });

  $(document).on('keydown', function(e) {        // For Debugging, pressing "Ctrl+C" gives flag values in console
    if ((e.metaKey || e.ctrlKey) && (String.fromCharCode(e.which).toLowerCase() === 'q')) {
      console.log("dragFlag:", dragFlag, " | menuFlag:", menuFlag, " | dragPos", draggie.position.y);
    }
  });
});


$(function() {
  var draggie = new Draggabilly('#bodyNav', {
    axis: 'y'
  });
  var menuFlag = 0;
  var dragFlag = 1;

  var vpH = Math.round($(window).innerHeight());
  var wH = Math.round($(window).outerHeight());
  var vpD = wH - vpH;
  var footH = Math.round($("#ypnFooter").outerHeight());

  var dragLowerLimit = Math.round($(window).innerHeight() * 0.8); //  Menu opens only if user drags the nav above this Limit...
  var dragUpperLimit = Math.round($(window).innerHeight() * 0.2); //  Menu closes only if user drags the nav above this Limit...
  var navClosedPos = Math.round($(window).innerHeight() - $("#navFooter").outerHeight()); //  Position of Closed Menu(Navbar) when the page loads...

  draggie.on('dragMove', function(event, pointer) {
    if (dragFlag === 1) {
      draggie.enable();
    }
    if (dragFlag === 0) {
      draggie.disable();
    }
  });

  draggie.on('dragEnd', function(event, pointer) {
    if (menuFlag === 0 && dragFlag === 1) {
      if (draggie.position.y < dragLowerLimit) {
        draggie.setPosition(0, 0);
        menuFlag = 1;
        $("body").addClass("NOscroll");
        $("html").addClass("NOscroll");
        dragFlag = 0;
      }
      if (draggie.position.y > dragLowerLimit) {
        draggie.setPosition(0, navClosedPos);
      }
    } else if (menuFlag === 1 && dragFlag === 1) {
      if (draggie.position.y < dragUpperLimit) {
        draggie.setPosition(0, 0);
      }
      if (draggie.position.y > dragUpperLimit) {
        draggie.setPosition(0, navClosedPos);
        menuFlag = 0;
        $("body").removeClass("NOscroll");
        $("html").removeClass("NOscroll");
      }
    }
  });
  draggie.on('pointerMove', function(event, pointer, dragAmount) {
    if (dragFlag === 0) {
      if ($("#navContent").scrollTop() === 0) {
        $("#navContent").addClass("NOscroll");
        $("#navContent").removeClass("scroll");
        if (dragAmount.y > 0) {
          dragFlag = 1;
        }
      }
      if ($("#navContent").scrollTop() > 0) {
        $("#navContent").addClass("scroll");
        $("#navContent").removeClass("NOscroll");
        if (dragAmount.y < 0) {
          dragFlag = 0;
        }
      }
    }
    if (dragFlag === 1) {
      if ($("#navContent").scrollTop() === 0) {
        if (dragAmount.y > 0) {
          dragFlag = 0;
        }
        if (dragAmount.y < 0) {
          dragFlag = 1;
        }
      }
    }
  });

  $(document).on('keydown', function(e) {
    // You may replace `c` with whatever key you want
    if ((e.metaKey || e.ctrlKey) && (String.fromCharCode(e.which).toLowerCase() === 'q')) {
      console.log("dragFlag:", dragFlag, " | menuFlag:", menuFlag, " | dragPos", draggie.position.y);
    }
  });
});
* {
  margin: 0;
  padding: 0;
  background: #222;
  color: #ddd;
}

#bodyMain,
#bodyNav {
  width: auto;
  height: 500vh;
  left: 0;
  right: 0;
}

#bodyMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(8vh + 1em);
}

.scroll {
  overflow-y: scroll;
}

.NOscroll {
  overflow-y: hidden;
}

#bodyNav {
  position: fixed;
  top: 92vh;
  background: #0b8;
  /*  Just to make navContent size visible    */
}

#navFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8vh;
  flex-direction: row;
  width: auto;
  left: 0;
  right: 0;
  background: #cf0;
  color: #222;
}

#navContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 92vh;
  background: #0fc;
  color: #222;
}

#navContent>p {
  background: #0fc;
  color: #222;
}
<script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <main id="bodyMain">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ipsa ratione, modi totam debitis ut consequuntur nemo voluptate doloremque repellendus quos praesentium rem enim iusto at natus eligendi nostrum maxime.</p>
    <p>Beatae autem, nostrum velit quas neque sequi totam amet ratione blanditiis accusamus voluptatum dolorum repellendus omnis alias nemo suscipit expedita quidem ullam. Laborum est illo eligendi voluptas ipsam recusandae cum.</p>
    <p>Repellat exercitationem doloribus molestias aspernatur odio velit et suscipit reprehenderit dolor nulla asperiores excepturi deleniti, nihil, magni provident quae ducimus veniam enim explicabo minus adipisci perferendis. Optio nam eos similique!</p>
  </main>
  <nav id="bodyNav">
    <div id="navFooter">
      Fixed Navbar
    </div>
    <div id="navContent" class="scroll" touch-action="none">
      Nav Menu Content<br/>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ipsa ratione, modi totam debitis ut consequuntur nemo voluptate doloremque repellendus quos praesentium rem enim iusto at natus eligendi nostrum maxime.</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <p>Beatae autem, nostrum velit quas neque sequi totam amet ratione blanditiis accusamus voluptatum dolorum repellendus omnis alias nemo suscipit expedita quidem ullam. Laborum est illo eligendi voluptas ipsam recusandae cum.</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <p>Repellat exercitationem doloribus molestias aspernatur odio velit et suscipit reprehenderit dolor nulla asperiores excepturi deleniti, nihil, magni provident quae ducimus veniam enim explicabo minus adipisci perferendis. Optio nam eos similique!</p>
    </div>
  </nav>
</body>

Проблема, с которой я сталкиваюсь, заключается в том, что меню открывается и закрывается правильно, но затем #navContent не прокручивается. Итак, я добавил 

if($("#navContent").scrollTop()===0){
    draggie.disable();
    $("#navContent").removeClass("NOscroll");
}

if(dragAmount.y >0){
    draggie.enable();
    $("#navContent").addClass("NOscroll");
}

Но теперь меню ни прокручивается, ни закрывается ...

...