Search code examples
jqueryhtmlcssmenubar

moving menu from horizontal to vertical as user scrolls?


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/]


Solution

  • 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