search

ChrisWojcik / single-page-nav

jQuery plugin that provides smooth scrolling and advanced navigation for single page websites.
http://chriswojcik.net/demos/single-page-nav/
161 stars 75 forks source link

Non-webkit browsers ignore the offset amount #2

Closed HunterJoe closed 10 years ago

HunterJoe commented 10 years ago

It appears that browsers other than webkit (Chrome and Safari) just ignore the offset that is being set on the object. I have a header that is 250px high and I need the content to flow underneath it but stop just below it when a link in the navigation is clicked. So I set the offset to 250px. The header logo, when clicked, will scroll the content all the way back to the "home section", but it is supposed to stop just below the header, not scroll all the way to the top of the window.

With the content scrolled to the top so that the "home page" content is partially visible (see the IE screenshot), I can click the logo and the content will scroll down (out from under the header that is covering it) and then snap back up to the top of the document window, as if the browser is allowing the JS to scroll the content to any position it wants, but then overrides it and places the content at the very top of the window.

Since the content scrolls "underneath" my 250px high header, this causes some problems. It works great in Chrome and Safari, just not FF and IE.

See screenshots: ie11 chrome

Anima-t3d commented 10 years ago

This issue is still present, probably related to: http://bugs.jquery.com/ticket/8362

While tweaking plugin, I came across crossbrowser working offset (although the plugin in general is now not properly scrollable): https://gist.github.com/Anima-t3d/8594831

ChrisWojcik commented 10 years ago

Sorry for the long delay in responding.

Can you provide a reduced test case that shows the issue?

My live demo is respecting the offset value in FF. It may be something particular to your set-up that I didn't account for when creating the plugin.

Anima-t3d commented 10 years ago

As far as I can recall I had the issue with the demo as well (FF 26 Win 8.1). I currently don't have the time, but I briefly checked with online demo and FF 27 and the result (when modified html js configuration with firebug it jumps instead of animating when entering a px value for offset). I hope to test it more properly this week.

ChrisWojcik commented 10 years ago

I definitely want to investigate this further, but all I have to go on right now is the provided screenshots. If you have any demo links, jsfiddles, etc., please don't hesitate to send them this way as well.

derick-montague commented 10 years ago

I am also experiencing this issue. I have a header with fixed position property value. I am have set the offset property to be the outer height of the header. In the Webkit browsers, the scroll positioning is perfect. In FF and IE is positions the section heading at the top of the page, underneath the header. The positioning is correct at first, it scrolls to the correct position and then quickly jumps/snaps to the top of the page. You can see it at www.pestandturf.com

Anima-t3d commented 10 years ago

@BeyondHyper Indeed that's the exact problem I had and is still present in current browsers. Unfortunately I'm currently occupied with other projects so I didn't have time to reproduce a slimdown version. Can you try and use my modified plugin code mentioned in https://github.com/ChrisWojcik/single-page-nav/issues/2#issuecomment-34681731 and see if that "fixes" the issue?

derick-montague commented 10 years ago

@Anima-t3d I don't believe that is it. It is specific to setting the updateHash property to true. When false it works as intended.

derick-montague commented 10 years ago

@ChrisWojcik - I have a solution for this and will send you a push request shortly.

ChrisWojcik commented 10 years ago

I am working on a solution as well. Looking forward to seeing your approach.

ChrisWojcik commented 10 years ago

Thanks to BeyondHyper's commit, the updateHash option is now accomplished via history.pushState. I think it's best to make this a progressive feature, so unfortunately hash updates won't be supported in IE9 and below.

Sorry if this doesn't meet everyone's needs. I tried several approaches to get the hash to update without breaking the offset. The closest I could get was to respect the value of offset but show a very visible "jump" in the scrollTop value when the hash was updated.

History.pushState looks like it's the best way to go.

Please let me know if anyone finds any further bugs. Thanks to everyone who helped find this issue!