javascript - 使用 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();
});