[matthewseanmclachlan]

Hi Sakin,

I noticed that when I scroll down my floating header initially snaps off from the top down into the body. Is there any way to make this transition look more fluid? Or is this a javascript issue?

[Sakin]

@matthewseanmclachlan: Try adding following css in “Appearance => Theme Options => Custom CSS” box:

#header-top,
#header-top.fixed-header {
	-moz-transition: all 0.5s ease-in-out; 
	-webkit-transition: all 0.5s ease-in-out; 
	transition: all 0.5s ease-in-out;
}

[matthewseanmclachlan]

I did, it still jumps when I scroll down. Is it possible for it to not jump at all as I scroll down from the top?

[matthewseanmclachlan]

http://www.trendfly.org

Okay I got the scrolling effect for my posts! But the menu bar still snaps off from the top in its animation. This got me wandering if I could change the animation effect on the menu bar. I think it uses:

`-moz-transition: all 0.50s ease-in-out;
-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;`

The scrolling animation effects for the smooth scroll uses:

ease-in-out-quad

Is there any way to get this animation effect for the menu bar? As you can see the animation for the scroll has no bounce or elasticity.

Thanks in advance!
Matt

[Sakin]

@matthewseanmclachlan: That is all we can do with custom css. For more effect you need to use JS.

[matthewseanmclachlan]

Interesting. To clarify, what I want to do is remove the effect? I don’t want it to bounce when I scroll, I simply want the menu to scroll down with the page. There is no way to remove the bounce effect?

If not, I guess I will try to find another solution.

Thanks again!
Matt

[Sakin]

@matthewseanmclachlan: Oh I misunderstood. Then remove the css I gave you. Check your site, it’s not live.

[matthewseanmclachlan]

Okay, I made it live again and deleted this css code:

#header-top,
#header-top.fixed-header {
-moz-transition: all 0.50s ease-in-out;
-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}

let me know then how to remove the bounce effect (I’m assuming the ease-in-out is only a part of this problem) and what css to use to make the menu simply scroll down with the page.

Thanks again Sakin!

[Sakin]

@matthewseanmclachlan: You can add the following css:

.site { padding-top: 75px; }
#header-top { position: fixed; }

[matthewseanmclachlan]

tried it. here is the results. the extra white padding at the top is not necessary i don’t think, and still it bounces? haha

it’s interesting, because it seems like an animation added to theme? I just want to switch it off.

I’m sure you understand. essentially I just want the menu bar to behave as it does when you scroll down the page. Staying fixed at the top. I just want that smooth scroll to be how it behaves when you open the site.

Example: http://www.theinfantree.com/

[Sakin]

@matthewseanmclachlan: It’s conflicting with your own customs css:
Find all the #header-top css, you will find the following:

#header-top { position: fixed; }
#header-top {
	background: #ea3b36;
	background: rgba(234, 53, 54, 0.7);
}
#header-top {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    position: relative;
}
#header-top { z-index: 99; }

Remove all that and add the following:

#header-top { 
	background: #ea3b36;
	background: rgba(234, 53, 54, 0.7);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); 
	-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 99; 
}

[Author]

Posts