Browser: Firefox 40 in Linux

Steps to reproduce:
1. Have a page with a sticky nav, a header above it, and enough content below it to scroll down the page.
2. Scroll down the page, enough that the nav is stickied.
3. Refresh the page.
4. Scroll to the top of the page.

Expected: The page looks normal.
Actual: The page has extra space at the top, the size of the nav.

Notes: Using non-responsive fixed-width Zen 3 theme. Modification to the default: #header is a sibling to #navigation in the DOM. The stickied element is a subnode of #navigation.

CommentFileSizeAuthor
#12 stickynav-2574207-12.patch625 bytesjelle_s
#5 refreshing_page_while_scrolled_down_causes_space_at_top.patch616 bytesa65162

Comments

Ken_g6 created an issue. See original summary.

nvidian’s picture

nvidian commented

Same issue with me using Adaptive theme (sub theme).

It may be fix (temporary) with CSS:

body {
	padding-top: 0 !important;
}
erykolryko’s picture

erykolryko commented

Thank you you saved me hours and days of searching
#2 worked for me

buttonwillowsix’s picture

buttonwillowsix commented

#2 also worked for me with a Bootstrap theme. Thanks! But... it introduces a weird behavior where the first anchor that is clicked is over-shot (the scrolling scrolls right past the anchor) JUST on the first click. After that it behaves well. Anyone have any ideas?

a65162’s picture

a65162 commented
StatusFileSize
new refreshing_page_while_scrolled_down_causes_space_at_top.patch616 bytes

In this module, It set originalPadding variable to remember original body padding-top, but If you don't regularly see the page, It'll get incorrect value.

hockey2112’s picture

hockey2112 commented

#2 worked for me. Thanks!

jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented
Version: 7.x-1.0 » 8.x-1.x-dev
Status: Active » Needs review
StatusFileSize
new stickynav-2574207-12.patch625 bytes

This patch fixes it for me.

Manuel Ferreira’s picture

Manuel Ferreira commented

In in Drupal 8.5 Theme Bartik and using the Sticky Navigation 8.x-1.1.

And the issue remains...

Solved via

So far my solution was to apply CSS + jQuery to me theme:

CSS

body.js--padding-fix {
padding-top:0 !important;
}
and JQUERY

jQuery(document).ready(function () {
if (jQuery('div.primary-menu-container-global').hasClass('stickynav-active'))
{
jQuery('body').addClass('js--padding-fix');
}
});

Note: if you apply the CSS directly to the body tag. as suggested before, it creates a problem with the Admin Menu, that covers the top of the site (minimized this way)

Is there a better solution?

johnnny83’s picture

johnnny83 commented

I have the same problem with the body padding-top. It also occurs if you scroll down, click a link and use the back button of the Browser to come back.

nwom’s picture

nwom commented
Status: Needs review » Reviewed & tested by the community

#12 works great. Thank you!

  • mattbloomfield committed 1c738ce on 8.x-1.x 
    Issue #2574207 by Jelle_S, a65162: Refreshing page while scrolled down...
mattbloomfield’s picture

mattbloomfield commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.