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

Posted 2023-02-16

【中文标题】当用户滚动时将菜单从水平移动到垂直？

【英文标题】：moving menu from horizontal to vertical as user scrolls?

【发布时间】：2012-10-25 00:18:29

【问题描述】：

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

【问题讨论】：

这不是一个简单的答案，但我建议调试此页面：jqueryfordesigners.com/demo/fixedfloat.html 我刚刚找到它，这就是我尝试学习的方式。我希望它会有所帮助。当然，那里使用的方法对你不利。

不是我要找的我希望整个菜单从水平菜单重新定位到垂直菜单这只是一个固定的浮动，当页面滚动时css正在改变.. ..

很抱歉，他们没有以对您有帮助的方式这样做。我已经看到 div '粘'到底部并慢慢地'滑出'，所以这不应该是 css 了。让我检查一下。

kk。也许这个。 rp.pl 页面上有两个小工具。当您打开任何文章并向下滚动时，您会看到页面底部会弹出一些内容。我真的希望它能对你有所帮助！

文章链接：rp.pl/artykul/16,945754-Mucha-zostaje--Klopoty-tez.html。向下滚动。它将从右侧滑入。

【参考方案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