[wp-trac] [WordPress Trac] #42598: Twenty Seventeen: Sticky header offset issue

[WordPress Trac]

#42598: Twenty Seventeen: Sticky header offset issue
--------------------------+-----------------------------
 Reporter:  anevins       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:  javascript    |
--------------------------+-----------------------------
 Theme: Twenty Seventeen
 Version: 1.3+ (not tested below 1.3)

 The theme has an option to make the header/ menu "sticky" or fixed
 position.

 The theme also has a function that handles the position of the viewport,
 so that the menu does not sit on top of content navigated from internal
 links.

 For example if you were to jump to a section of the page using '#about'
 the theme's JS would fire and amend the viewport in relation to the height
 of the fixed menu.

 '''The bug'''
 If a link goes to a section of content another page the theme's JS that
 amends the viewport no longer works.

 I've tried debugging this from the support forums on someone's website and
 I think the issue is related to the order in which the JS fires;
 1) When the page loads the header height is not fully calculated;
 2) The theme's JS then moves the viewport to fix the sticky menu overlap,
 which uses the position of the scrollbar as reference;
 3) The theme's JS then applies a margin-bottom on the header, causing a
 shift in the scrolling position
 4) The result is that the offset is incorrect and the fixed menu sits on
 top of the content.

 Steps to replicate:
 - Enable the sticky header
 - Create a "Continue reading" link that goes to a new page (with a hash to
 the section)
 - Press that "Continue reading" link to see the problem in the linked page

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42598>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform