CODEWITHSUNDEEP
javascriptjquerycss
egr103
egr103

Reputation: 3978

Change vertical nav to horizontal using jquery

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

Upvotes: 1

Views: 1566

Answers (2)

kei
kei

Reputation: 20491

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

​

Upvotes: 2

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

Okay, providing I understood you correctly (see my comment looking for clarification), your goal is to make sure that your navigation pane is visible to your site visitors even when they scroll down the page. I would caution you against changing the nav bar to show horizontally after reaching a certain point on the page only because it will look pretty choppy, especially in slower browsers, unless (and sometimes even if) you provide a lot more code (complex for a novice) to smooth out the transition.

What I suggest is that you take a look at this question from a few days ago. I created a demo for the effect that he was looking for, which is very similar to what you are looking for, and hosted it on my development site. Take a look and if it's something that you like and if it is and you have trouble implementing it let me know and I'll be more than happy to help you.

Upvotes: 1

Related Questions