I don't recall any italics tag Inger, do you mean something else?

Could it be the i tag used for the icons ?

Yes, I found it now.

Another thing I'm wondering about: Is it possible to make the menu bar move to the top a bit slowlier? Right now it's so abrupt. I guess it has to be some transition setting, but I can't find out which, and which element to apply it to. Anyone?

You could make a slight change to the data attributes on the button group to allow the group to scroll up and hit the top and then stick. With my mouse click scroll I do not see much difference but with a normal smoother scroll one might.

To do this delete the data-options attribute from the button group. (I am not 100% sure what this does)

Change the data-top-anchor attribute value in the button group from 1 to whatever the column height is in row one that sits above row two. (The distance the button group moves to get to the top).

In order to get animation or transition it may be better to approach the sticky another way using the example provided on the foundation site using the jscript.

I usually reverse the logic though because you have to have a class to start with and remove it rather than adding it for the animation which is the more normal way to do it.

Such as:


would need to be:



Once you have the code changed you can then add the class shrink to the container (title-bar in the example case)
and then add the css transition settings you want it to look like by "greying the shrink class out" and only setting the other classes css on that element. When sticky sticks it will remove the "shrink class" and your transition will take place.

Inger try the option I was showing Steve, using a column with the ID sticky-top and changing that data-top-anchor attribute value from one to sticky-top, that will make it smoother it then pops down a bit rather than jumping up. So if you have a header maybe the next column down kind of thing... you might like that better?
What was the i tag you were referring to, maybe I can re-word that step if it's confusing before I move it to it's new home.

By the way I'm just working on a page scroll step by step should be ready soon, the example is up already.

Thanks both! I will try out both solutions.

Alter, I understand that i tag now. I was just looking at the html in the Foundation building block and couldn't understand it, but once I read your description, it all became clear.

The page scroll you are working on looks interesting. I did a Magellan one some time ago (see 2nd link in my signature), but there was some bit of css I was not able to do within the programme, so I had to add it in the settings.

I tried Alter's suggestion first, and that was easy!

There is one thing you might want to edit in your description:
When talking about the column that you initially make 1500px high, you say it will get the default class name of column-2. But just above you talk about the top row/column, setting a height on it. So I get that one named column-2, and the bottom one column-3 if I follow the sequence in your description.
No big thing, but it might perhaps cause confusion for some people.

That's is a good idea Inger, I'll make it so you name a class for those. I was trying to cut down on the steps but you're right if those columns get different default classes it sure doesn't help.

By the way the page scroll download & step by step has been added if you want to try that one.