search

acolangelo / jPanelMenu

A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).
http://jpanelmenu.com
922 stars 188 forks source link

Best way to handle window.scroll? #72

Open westwick opened 10 years ago

westwick commented 10 years ago

I have this small function working fine:

$(window).scroll(function() {
    console.log($(window).scrollTop());
  })

... but as soon as I call jPM.on(), it no longer works. Is this because it's placing all the page content inside the jPanelMenu-panel class, and the window is no longer scrolling but rather just the content inside the jPanelMenu-panel class? If so, what is the best to handle/detect how far down a user has scrolled? It seems I can't use $('.jPanelMenu-panel).scroll(...) or .scrollTop(), etc.

westwick commented 10 years ago

After some more google searching I found this: http://stackoverflow.com/questions/21592433/jpanelmenu-and-scrolling-not-working-together

I altered the setjPanelMenuStyles function to change the overflow-x to visible and it indeed solved my problem. However I'm not 100% what all this could be affecting and I assume there is a reason it is being set this way, even though it seems to function perfectly without it. Any thoughts?

As a side note, I also had problems with my fixed position elements being screwed up after calling jPM.on(), and by simply commenting out the entire checkFixedChildren function, I no longer have the problem and the functionality is still there for me. Would love to hear any thoughts on that as well!

thisisjamessmith commented 10 years ago

Without overflow-x:hidden you'll get a horizontal scrollbar on your mobile layout when the nav is open surely?

westwick commented 10 years ago

You are right, don't know how I didn't notice that.

thisisjamessmith commented 10 years ago

The real problem is complex, summarised here: http://www.brunildo.org/test/Overflowxy2.html ... Basically using different values of overflow-x and overflow-y can have unexpected results. I've hacked around this just now by adding body{overflow-x:visible!important} - this leaves the jPanelMenu's overflow-x:hidden style intact.