Close the pop-up menu when user reach the bottom of the page

user_12897971 0
Viewed 202

I have a simple menu that is opening on click.

What I would need is to:

  1. open menu/hamburger on click top left
  2. user read all text and scrolling down 3.3rd step - close/hide the pop up menu when user reach the end of the page

I kindly ask for a snippet of code to add at my js code

$(document).ready(function() {
    $(".toggle-nav").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });
    $(document).click(function(e){
      if(!e.target.closest("ul") && $(".menu a").hasClass("active")){
         $(".menu ul").toggleClass("active");
         $(".toggle-nav").toggleClass("active");
      }
    })
    
});

Here is my codepen to test the function

great solution?

p.s. obviously the action need to work every time the user toggle the hamburger button

menu css html jquery javascript
4 Answers

Replace your jQuery with this

$(document).ready(function () {

    $(".toggle-nav").click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });

    $(document).click(function (e) {
        if (!e.target.closest("ul") && $(".menu a").hasClass("active")) {
            $(".menu ul").toggleClass("active");
            $(".toggle-nav").toggleClass("active");
        }
    });


    $(window).scroll(function () {
        var scrollPos = $(document).scrollTop();
        var hgt = $('.menu').height();
        var win = $(window).height();

        if (hgt - win === scrollPos) {
            $(".menu ul").toggleClass("active");
            $(".toggle-nav").toggleClass("active");
        }
    });

});

Version 2: With FadeOut

For this option to work you need to add id="fadeout" to the ul element.

$(document).ready(function () {

    $(".toggle-nav").click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });

    $(document).click(function (e) {
        if (!e.target.closest("ul") && $(".menu a").hasClass("active")) {
            $(".menu ul").toggleClass("active");
            $(".toggle-nav").toggleClass("active");
        }
    });


    $(window).scroll(function () {
        var scrollPos = $(document).scrollTop();
        var hgt = $('.menu').height();
        var win = $(window).height();

        if (hgt - win === scrollPos) {
            $('#fadeout').fadeOut("slow", function () {
                $(".menu ul").toggleClass("active");
                $(".toggle-nav").toggleClass("active");
                $('#fadeout').removeAttr("style");
            });
        }
    });

});
user_109681340

I found this code that may help you (it works almost for all the browsers), It left just the code to close the popup

Update
(the URL in the comment I couldn't add it here).

user_135577160

This should work:

var menu = document.getElementById("Menu");
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= menu.offsetHeight) {
      if($(".menu a").hasClass("active")){
         $(".menu ul").toggleClass("active");
         $(".toggle-nav").toggleClass("active");
      }
    }
};

Then on your <ul> tag, give it the id Menu

user_139510520

You can do this using the jQuery scroll to detect if the scroll reach the bottom and add the toggle when true like this:

$(window).scroll(function () {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    if ($(".menu a").hasClass("active")) {
      $(".menu ul").toggleClass("active");
      $(".toggle-nav").toggleClass("active");
    }
  }
});

Codepen

user_24982030
Related