So here is the issue I am facing:
- The layout is optimized for mobile with a max-width of 480px. I have a menu which includes options like login, register, and cart, all of which have dropdowns. Since the height of these dropdowns is dynamic, I need to calculate their height and prevent users from scrolling below that element.
For instance - Let's say .class has a height of 900px, I want to restrict users from scrolling below that height. So when the viewport or window reaches the end of that .class, the user should not be able to scroll down further.
Below is the code where I attempted to achieve this using the 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 a preview of the mobile layout and dropdowns.
https://i.sstatic.net/kB2ST.pnghttps://i.sstatic.net/2Axed.png