Reiko Kawahara Reiko Kawahara - 3 months ago 7x
jQuery Question

Jquery navbar animation not working properly

I looked through this website for similar question, but couldn't find any.

So I've been working on a website with bootstrap3 for a little bit now and most of the formatting/design part is done, but have one problem I can't solve myself.
I added Jquery to make the navbar shrinks and changes background color when users scroll down to a certain point.(Thanks to peeps helped me out here)
It kind of works, but the movement of it is really weird.
When load the page, the navbar is already shrunk and background is colored, but when scrolled a little bit it blows up in size and the background disappears, and when scrolled even more to the point where I set Jquery to start working, navbar shrinks back and background color changes again.
It's hard to explain in writing, so please see the website and see what I'm talking about.
Below is the website I'm working on.

Test website

I'm assuming its the Jquery not working when loaded, so the CSS setting supposed to be hidden(shorter navbar height and background color) isn't hidden initially.

Below is the jquery code:

$(window).scroll(function () {
if ($(window).scrollTop() > 70) {
} else {
$("#top-bar").removeClass('animated-header'); }


itemsCustom : false,
pagination : false,
items : 5,
autoplay: true,


Thanks for the help in advance!


Nice website!

Take a look at your header element, you will see that you already put the animated-header class there which causes the problem. Here is your code:

<header id="top-bar" class="navbar-fixed-top animated-header">

What you can do is simply remove that class, and your script above will help deal with adding/removing this class base on the scrollTop value. Something like this will help:

<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header -->