SOLVED: Sticky header "scrolling" class not set if going to hash anchors mid way down the page until scrolled

Bugs
1

Bricks Version: 1.1.3
Browser: Chrome 90
OS: macOS
URL: About - Elements.biz

If you go to this link directly the sticky header doesn’t show until scrolled.

2

This can be fixed by taking off the ‘sticky on scroll’ setting but it doesn’t fix scrolling text color, background and box shadow settings not being applied until scrolled.

3

I managed to fix this on that link by adding this JS:

<script>
window.addEventListener('load', (event) => {
if(window.location.hash) {
var element = document.getElementById("bricks-header");
  element.classList.add("scrolling");
  element.classList.add("fixed");
}
});
</script>

This might not be the best way. Is there a better way?

4

Hi James,
Welcome to the forum and thanks for reaching out!

I’m not sure if I understand the problem 100%. Scrolling text color, background and box shadow are only applied on scroll. As far as I see, it is working as expected for me: https://vimeo.com/688780473/adb1237673

Please let me know if I missed something :slight_smile:

Best regards,
timmse

5

Thanks for the reply Timmse.

I think it depends on the definition of scroll, I was hoping that going to an anchor lower down the page from another page would activate the scroll because it’s not loaded at the top. In a way your loading a page and scrolling down the the anchor.

However, if you mean have I literally scrolled on the page since it’s been loaded then I guess I haven’t.

When I go to a hash anchor from another page the nav is still floating, it just doesn’t have scolled styles applied until I scroll. It just looks weird to me.

6

Hi James,

correct, if you go straight forward to a #section anchor (click on a link that contains an anchor on another page), the page doesn’t scroll. Instead, it “jumps” directly to the #section anchor and this is technically a different mechanism than “scrolling”.

7

OK thanks I thought you might say that. I have applied that JS code to another of my websites now because I think it works better. But I see your logic.

1 Like
8

Hi James,
can you share the code so other users can benefit from it?

9

It’s the second comment above :slightly_smiling_face:

10

Ah sorry :upside_down_face: Thanks a lot!