1

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

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

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

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

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

2 回答 2

2

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

演示

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

​</p>

于 2012-07-30T16:57:26.483 回答
1

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

我建议你看看几天前的这个问题。我为他正在寻找的效果创建了一个演示，它与您正在寻找的效果非常相似，并将其托管在我的开发站点上。看一看，如果它是您喜欢的东西，如果是并且您在实施时遇到困难，请告诉我，我将非常乐意为您提供帮助。

于 2012-07-30T16:43:25.270 回答