Question

Basically I have an unordered list acting as my navigation on a one page website sorted by sections. These sections or panels are full width and height of the browser window.

In the first panel, this list is vertical but when the user scrolls down the page to section two (i.e. the second panel from the top of the browser window) I’d like to change the style of it so that it fixes to the top of the browser window and becomes a horizontal nav instead of a vertical one. I don’t want to duplicate the list if possible.

I’m not great at jQuery and don’t really know where to start. Any help would be great.

This is my current code that gets the width and height of the browser window and displays a full screen div:

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

Answer 1

Here’s a very simple example:

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

​