I'm currently running Wordpress with Twitter Bootstrap, bhtml5 boiler plate, css3 and latest jQuery.
My main navigation menu is currently fixed to the top of the page in a horizontal position.
How do I go about making the menu move to a vertical position as the user scrolls down the page( preferably with a nice transition effect)?
If some one could point me in the direction of a jQuery/Mootools/etc doc that would help me do this it would be a great help.
$(window).scroll(function(e) {
if ($(window).scrollTop() > 0) {
$("#nav").addClass("horizontal");
} else {
$("#nav").removeClass("horizontal");
}
//console.log($(window).height());
});
basicly the oppisite of this and adding a transition effect:[http://jsfiddle.net/bbYZS/2/]
Ok after working with jQuery for a while I have managed to do this myself: I am using jQuery UI switchClass() docs and jquery animate docs Here is a fiddle here is the exact javascript:
$(document).ready(function () {
// This seems smoother but "animate" is buggy when applied to scrollTop so uncomment this if you want to see the smoother button function work
// var toggleStatetwo = true;
// $('.clickthis').on('click', function() {
// if(toggleStatetwo) {
// $(".nav").animate({"width": "81px"},"slow");
// } else {
// $(".nav").animate({"width": "801px"},"slow");
// }
// toggleStatetwo = !toggleStatetwo;
// });
var toggleStatetwo = true;
$('.clickthis').on('click', function () {
if (toggleStatetwo) {
$(".nav").switchClass("nav", "nav_vert", 800);
} else {
$(".nav_vert").switchClass("nav_vert", "nav", 800);
}
toggleStatetwo = !toggleStatetwo;
});
$(document).scroll(function (e) {
if ($(window).scrollTop() > 20) {
$(".nav").switchClass("nav", "nav_vert", 800);
} else {
$(".nav_vert").switchClass("nav_vert", "nav", 800);
}
//console.log($(window).height());
});
});
Enjoy who ever needs it and vote this up :D