使用jquery将垂直导航更改为水平导航

Change vertical nav to horizontal using jquery

本文关键字：导航 水平 使用 垂直 jquery      更新时间：2024-06-10

基本上，我有一个无序的列表作为我在一个按部分排序的单页网站上的导航。这些部分或面板是浏览器窗口的全宽和全高。

在第一个面板中，这个列表是垂直的，但当用户向下滚动页面到第二部分（即浏览器窗口顶部的第二个面板）时，我想更改它的样式，使其固定在浏览器窗口的顶部，成为水平导航，而不是垂直导航。如果可能的话，我不想重复这份清单。

我不擅长jQuery，也不知道从哪里开始。任何帮助都会很棒。

这是我当前的代码，它获取浏览器窗口的宽度和高度，并显示全屏div：

function fitElements(){
var height=$(window).height();
var width=$(window).width();
$('.panel').css('height',height);
$('.panel').css('width',width)
};

这里有一个非常简单的例子：

演示

html：

<ul id="nav">
<li><a href="#" id="linkOne">One</a></li>
<li><a href="#" id="linkTwo">Two</a></li>
<li><a href="#" id="linkThree">Three</a></li>
</ul>
<div id="divOne" class="panel">    
</div>
<div id="divTwo" class="panel">    
</div>
<div id="divThree" class="panel">    
</div>

css：

#nav {
 position:fixed;
 top:0;
 left:10px;     
}
#nav.horizontal li {
  float:left;
}
#divOne {
 background-color:#cef;   
}
#divTwo{
 background-color:#efc;   
}
#divThree{
 background-color:#fce;   
}

​js/jQuery：

$("div.panel").css({
    height: $(window).height(),
    width: $(window).width()
});
$(window).scroll(function() {
    ($("#divTwo").offset().top <= window.pageYOffset) ? $("#nav").addClass("horizontal") : $("#nav").removeClass("horizontal");
});
$("#linkOne").click(function(e){
   $('html, body').animate({
        scrollTop: $("#divOne").offset().top
    });
    $("#nav").removeClass("horizontal");
    e.preventDefault();
});
$("#linkTwo").click(function(e){
   $('html, body').animate({
        scrollTop: $("#divTwo").offset().top
    });
    $("#nav").addClass("horizontal");
    e.preventDefault();
});
$("#linkThree").click(function(e){
   $('html, body').animate({
        scrollTop: $("#divThree").offset().top
    });
    $("#nav").addClass("horizontal");
    e.preventDefault();
});

​

好的，如果我正确理解你（请参阅我的评论以寻求澄清），你的目标是确保你的导航窗格对你的网站访问者可见，即使他们向下滚动页面。我要提醒你，不要在到达页面上的某个点后将导航栏更改为水平显示，因为它看起来会很不稳定，尤其是在速度较慢的浏览器中，除非（有时甚至是）你提供了更多的代码（对新手来说很复杂）来平滑过渡。

我建议你看看几天前的这个问题。我为他想要的效果创建了一个演示，这与你想要的非常相似，并在我的开发网站上发布了它。看看，如果这是你喜欢的东西，如果是，并且你在实现它时遇到困难，请告诉我，我会非常乐意帮助你。

相关文章：