Изменить вертикальную навигацию на горизонтальную, используя 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

Okay, обеспечивая я правильно понял (см моего комментария ищут разъяснения), ваш Цель состоит в том, чтобы ваша навигационная панель была видна посетителям вашего сайта, даже когда они прокручивают страницу вниз. Я бы предостерег вас от изменения навигационной панели, чтобы показать горизонтально после достижения определенной точки на странице только потому, что она будет выглядеть довольно прерывистой, особенно в более медленных браузерах, если только (а иногда даже если) вы предоставляете намного больше кода (сложный для новичок), чтобы сгладить переход.

Что я предлагаю, так это то, что вы посмотрите на this question с нескольких дней назад. Я создал демо для эффекта, который он искал, который очень похож на то, что вы ищете, и размещал его на моем сайте разработки. Взгляните, и если это то, что вам нравится, и если это так, и у вас есть проблемы с его внедрением, дайте мне знать, и я буду более чем счастлив помочь вам.