0

So this is the problem that i have:

  • its mobile layout so max-width is 480px, and i am having menu which have login, register, cart where they have dropdown. Their height is dynamic so i need to get height from them and then dont allow to user to scroll below that element.

For example - .class have height 900px and i wont allow users to scroll below that 900px. So when viewport or window comes to end of that .class user cant scroll down.

Here is the code there i tried to do that with scrollTop function.

var limitScroll = false;

$(window).scroll(function() {
    if(limitScroll && $(this).scrollTop() > limitScroll) {
        $(this).scrollTop(limitScroll);
    }

});

// Opening box-container
$('.top-menu li a.links').click(function(event){
    event.preventDefault();
    $('.box-container, .sub-menu').removeClass('opened');
    $(this).next().addClass('opened');

    var c = $(this).next();
    limitScroll = c.outerHeight()-$(window).height()+c.offset().top + 20;

});

Here is preview of mobile layout and dropdowns.

enter image description hereenter image description here

Krešimir Galić
  • 311
  • 2
  • 14
  • You can disable mouse scroll temporarily when reached to that point and vice versa. Or you can wrap the menu content in a container (which should be fixed positioned) and add a custom scrollbar for that container (like slimscroll) – abir_maiti Jul 22 '15 at 11:50

1 Answers1

1

A better approach would be to trigger that dropdown as a fullscreen div. So show this div on button click:

<div id="login>...</div>

styles

#login{
    height:100%;
    min-height:100%;
    width:100%; 
    position:absolute;
    z-index:999;
}

Now the div overlays the complete site and the user is able to close it with the "close" button. No scrolling issues ;)

EDIT: You could also style the li of that dropdown to fill the screen size.

m1crdy
  • 1,371
  • 2
  • 25
  • 58
  • I cant do that, because other elements before have position:relative so i cant make that fullscreen – Krešimir Galić Jul 22 '15 at 11:50
  • you could give the dropdown the height of the viewport (calculate it with jquery on dropdown trigger) and disable scrolling: http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery – m1crdy Jul 22 '15 at 12:30