This tip is compatible with IE8+, FF7+, Chrome, Safari and Opera10+. See the Live Demo. Scroll to see my menu.
This little plugin is was orignaly created by Nick La as a "Scroll to top" button. I made some very minor modifations to it, a little CSS tweaking to #xg_navigation and it gave me just what I wanted for my hidden website navigation menu.
To use it is very simple.
Add the code below to your custom code box.
<script>
$(document).ready(function(){
// hide targeted element first
$("#xg_navigation").hide();
// fade back in targeted element
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#xg_navigation').fadeIn();
} else {
$('#xg_navigation').fadeOut();
}
});
});
});
</script>
Now add the code below to your advanced CSS box.
/*Onscroll-Menu*/
.xg_theme #xg_navigation {
margin-top: -173px;
margin-top: -212px \0/; /* IE8+9 */
position: fixed;
z-index: 10;
}
/*Bug-Fix-For-Mozilla-Browsers*/
@-moz-document url-prefix() {
.xg_theme #xg_navigation {
margin-top: -212px
}
}
You will most likely will have to make some adjustments to the margin-top propeties to get it just right when viewing it in all browsers.
As Always:
If this does not go off without a hitch, please don't get upset. I may have left something out. Reply below if you need help.
Don't forget to share with us all how you used this tip and any modifications you may have made to make it work on your Ning powered website.
Replies
nice
Thank you
@anthony..nice find...but having problems with it in differtent browser,have to play with code a lil bit.
Yes, there are margin issues in Firefox and IE. I have included a work around for FF and IE in the CSS. Is this not working for you or are you saying my display is off?
If it is your site where you are having issues, can you share your URL and I will see what I can do. Which browser and version are you having issues with?
Thank you