將用戶滾動的菜單從水平移動到垂直？

我目前正在使用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()); 
});

這個basicly的oppisite並添加轉場效果：[http://jsfiddle.net/bbYZS/2/]

來源

2012-10-25 vimes1984

這將是沒有一個簡單的答案，但我會sugegst調試這個頁面：http://jqueryfordesigners.com/demo/fixedfloat.html我有剛剛找到它，這就是我嘗試學習東西的方式。我希望這會有所幫助。當然，那裏使用的方法不適合你。 – Grzegorz

不完全是我在找什麼我想要整個菜單重新定位它的自我從一個水平菜單到一個垂直菜單這只是一個固定的浮動CSS當頁面滾動時正在改變...... – vimes1984

對不起他們沒有以一種對你有幫助的方式去做。我已經看到divs「粘」到底部並慢慢地'滑出'，所以不應該再css了。讓我檢查一下。 – Grzegorz

確定使用jQuery工作了一段時間後，我已經成功地做到這一點自己：我使用jQuery UI switchClass（）docs和jQuery動畫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

來源

2013-03-30 22:32:59 vimes1984

將用戶滾動的菜單從水平移動到垂直？

回答

相關問題