用户滚动时将菜单从水平移动到垂直?

时间:2012-10-25 00:18:29

标签: jquery html5 css3 menubar

我目前正在使用Twitter Bootstrap,bhtml5样板,css3和最新的jQuery运行Wordpress。

我的主导航菜单目前固定在水平位置的页面顶部。

当用户向下滚动页面时,如何使菜单移动到垂直位置(最好具有良好的过渡效果)?

如果有人能指出我的jQuery / Mootools / etc文档的方向,这将有助于我这样做,这将是一个很大的帮助。

$(window).scroll(function(e) {
if ($(window).scrollTop() > 0) {
    $("#nav").addClass("horizontal");
} else {
    $("#nav").removeClass("horizontal");
}
//console.log($(window).height());
});

基本上是对此的反对并增加过渡效果:[http://jsfiddle.net/bbYZS/2/]

1 个答案:

答案 0 :(得分:1)

在使用jQuery一段时间之后我已经成功完成了这项工作: 我正在使用jQuery UI switchClass()docs和jquery animate docs 这是一个fiddle 这是确切的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());
});

});

享受谁需要它并投票:D