0

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

4

1 回答 1

1

好的，在使用 jQuery 一段时间后，我自己设法做到了：我正在使用 jQuery UI switchClass() docs和 jquery animate docs 这是一个小提琴 ，这里是确切的 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

于 2013-03-30T22:32:59.287 回答