kswedberg/jquery-smooth-scroll

Initial scroll position incorrect

jrseliga opened this issue · 7 comments

I'm experiencing the same problem as was described in issue #50. I attempted the CSS fix linked by @larsnystrom but it did not work.

Hey @jrseliga, is there any chance you still have the HTML that was causing your issue?

@kswedberg As much as I hate to say it, but the OP has not provided any additional details in two weeks, Close issue?

Yeah, thanks for the update @travco. @jrseliga, if you can provide some HTML that demonstrates the problem, I'll happily reopen this issue.

@kswedberg, sorry I didn't respond a few weeks back I was on vacation and it fell off my radar. I ended up creating a hidden copy of the affixed div to offset the lost height incurred when it is removed from the document flow. I should be able to get a copy of the old HTML.

I wasn't able to ge the code for the other site, but I recently built another one and it's experiencing the same issue.

If you click on Sponsors in the main nav, it scrolls to one position. Click Sponsors again, and it scrolls up to another position.

http://rug.pointpark.edu

Hi @jrseliga. I see the problem. It's actually working as intended. When I click Sponsors the first time, the header is not "fixed." It has a height of 74px. So the window scrolls down to 252. At that point, the nav becomes fixed, taking it out of the document flow, so the "Sponsors" section actually moves up 74px from the top of the document. Clicking on the Sponsors link again moves the window scroll position to 178px, exactly 74px less than the original position (and exactly the height of the nav).

Thanks @kswedberg, I was actually able to solve the "problem", though it's rather crude. I cloned (jQuery) the top nav, gave the element a unique class (ppu-clone), removed a bunch of the clone's child elements (just so there wasn't a ton of extra markup for no reason), and appended it after the original.

Finally I created a CSS rule for an element .ppu-clone immediately after the the navigation when it is affixed to the top (removed from the document flow).

.affix + .ppu-clone { display: block; visibility: hidden; }