Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Jumpy sticky header on scroll

Featured Lock Resolved Issue
Hello,

I tried to apply the same css from here: https://www.joomshaper.com/forums/jumpy-scroll-with-sticky-header to fix my jumpy scroll issue with the header on Stellar, and it did fix the majority of the issue but now I'm having an issue with the top bar space when transitioning to the sticky menu bar.

Here's the site I'm having the issue with: https://bit.ly/2BnCN4j

If you scroll slowly, you'll see that the delay is too long and the space behind the top bar is revealed before the header locks in place.

Thank you,
John

4 Answers

[email protected]

More than a month ago #Permalink
Hello,

Ok, I had to revert back to the following CSS


#sp-header {
position: relative!important;
width: 100%;
height: auto;
top: 0;
left: 0;
padding: 5px 0;
box-shadow: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#sp-header.header-sticky {
position: fixed!important;
z-index: 9999;
background-image: none!important;
}


so I wouldn't lose my top bar. Now I'm just back to the issue of a jumpy header on scroll. More specifically, it's the content below the header that jumps when the sticky header kicks in.

John

[email protected]

More than a month ago #Permalink
Hello,

I'm still having the jumpy scroll issue. Seems to be a common thing with some sticky headers. Happens on the following demos as well.

Titlehttp://demo.joomshaper.com/?template=salon
Titlehttp://demo.joomshaper.com/?template=estate
Titlehttp://demo.joomshaper.com/?template=gazette

John

[email protected]

More than a month ago #Permalink
Is there a fix available for this?

I'm looking for one that doesn't involve the slider images being covered by the main navigation bar.

porscha

More than a month ago #Permalink
Is there a fix available for this?

I'm looking for one that doesn't involve the slider images being covered by the main navigation bar.


Hey John,

I would suggest to check the answer to this question. I think that it will help you, just change the margin-top value to match your header height and it should work fine.

Cheers!


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 105
Toufiq

Toufiq

Total Accepted Answers: 61
Sifat

Sifat

Total Accepted Answers: 44
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 17
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 17

118

Templates

305907

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us