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

Question

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

在第一个面板中，此列表是垂直的，但是当用户向下滚动页面到第二部分（即浏览器窗口顶部的第二个面板）时，我想更改它的样式以便修复它到浏览器窗口的顶部，成为水平导航而不是垂直导航。如果可能，我不想复制列表。

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

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

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

Answer 1

这是一个非常简单的例子：

DEMO

<强> 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();
});

Answer 2

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

我建议您几天前查看this question。我创建了一个他正在寻找的效果的演示，它与你正在寻找的非常相似，并在我的开发网站上托管它。看一看，如果它是你喜欢的东西，如果是，你实施它有困难让我知道，我会非常乐意帮助你。