When you want your menu always to be in the current view, also in a webpage with a lot of content the cvRelativeTop class has an answer. This class animates the menu with a tween. I’ve added a onStart and onComplete function so you can add custom events to the class.
This class is so powerful that I’ve used it also on this website!
The html
The html in this example is very basic
Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /* and so on and so on...*/RelativeTop!
The css
Please take note of the margin-top variable in the col div.
#text {
float: left;
width: 500px;
padding: 10px;
background-color: #EEE;
}
#col {
margin-top: 0px; /*if this one is not defined the class will not work properly*/
float: left;
padding: 10px;
width: 270px;
height: 503px;
background: url(images/rcol_example.jpg) no-repeat;
}
The javascript
Just slides the relative div with an animation.
window.addEvent('domready', function() {
var relative = new cvRelativeTop('col',{duration: 200, between: [250,1000] });
});
Advanced example with custom function onTransition
You can add a custom function in the onTransition parameter in case you would like more control over the class and it’s behaviour.
window.addEvent('domready', function() {
var relative = new cvRelativeTop('col',{
duration: 200,
between: [250,1000],
transition: transition: Fx.Transitions.Bounce.easeIn,
onTransition: function(){
var margintop = $('col').getStyle('margin-top').toInt();
if(margintop > 500 && margintop < 550){
alert('margin-top > 500px!');
}
}
});
});
