Sticky header jumps (Wordpress theme)

Question

I'm a complete beginner in HTML/CSS/PHP; I'm building a website from an existing WP theme that uses a sticky header. The theme is onetone . I've been able to heavily customize it, but can't find a solution to the problem the header is giving me.

Here is the site: http://firstinkstudios.com/

When scrolling, the header jumps jerkily before sticking to the top of the page; the same happens when you scroll back to the top.

(please ignore the other errors, the site's under construction)

I've been able to identify the problem, a line in a javascript jQuery Parallax v1.1.3; however, after replacing that particular script with a different one with the same functionality, the problem persisted. So it's something in the coding of the theme itself that's adding unwanted styles to the header. I fiddled with the CSS and PHP trying to work out the error, but can't seem to correct it.

I've seen similar questions asked and answered before on Stack Overflow, but on my current level of understanding, they go a little over my head. I understand the problem, but can't fix it in my specific case.

So I was wondering if someone could help me in this regard. I'll provide whatever snippet of code is necessary.

Thank you in advance.

Answer 1

In your onetone.js line 166, the code read as:

$('.sticky-header').css({ 'position': 'static' }).removeClass('fxd');

I don't know why you ever want it as static if you want a fixed header. Try disable that and add this to your CSS:

.home-header {
    position: fixed;
}

Answer 2

I was working on it today, and I found the solution. Change the CSS from

.fixed-header .main-header {
    display: none;
}

to

.fixed-header .main-header {
    display: inline;
}

This will enable smooth scrolling on all pages.