Question

我目前正在使用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/]

Answer 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

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

1 个答案: