HTML5是一種常用的網頁語言，可以實現各種炫酷的效果。其中懸浮導航是一種非常實用的功能，可以在網頁上方固定導航欄，隨著鼠標滾動自動切換。本文將介紹如何使用HTML5設置懸浮導航。 首先，在HTML文件中添加一個導航欄的div標簽，并設置其樣式為position:fixed，使導航欄始終在瀏覽器窗口的頂部。代碼如下：

<style>
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 20px;
z-index: 999;
}
</style>
<div class="nav">
<p>導航欄</p>
</div>

上述代碼中，樣式設置了導航欄的位置、顏色、高度等屬性。而z-index屬性可以保證導航欄始終在頁面最上方。 接下來，我們需要使用JavaScript代碼來實現導航欄的自動切換。我們可以使用jquery插件實現此功能。代碼如下：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>=50){
$('.nav').addClass('nav-fixed');
}else{
$('.nav').removeClass('nav-fixed');
}
});
});
</script>
<style>
.nav-fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 20px;
z-index: 999;
}
</style>

上述代碼中，使用了jQuery的scroll事件來監聽頁面滾動事件。當頁面滾動高度達到50時，導航欄會自動添加一個nav-fixed的class，此class的CSS樣式設置了導航欄始終在頁面最上方。反之，當頁面滾動高度小于50時，導航欄會自動移除nav-fixed的class，恢復到原來的位置。 總的來說，使用HTML5設置懸浮導航的方法就是給導航欄設置固定位置，并通過JavaScript來實現導航欄的自動切換。代碼實現起來比較簡單，但同時也需要注意兼容性和代碼的優化。