I was wondering if anyone could point me in the direction of a tutorial that would show me how to best achieve the same affect as that demonstrated here on the mailchimp website: https://mailchimp.com/features/

 

As you scroll down, the navigation area becomes fixed as it hits the top of the screen and then allows you to select the part of the page you want to view and then scrolls to it accordingly.

 

Thanks

 

J

Hi,

Is this what you are looking for: http://jsfiddle.net/x3V6Y/

 

Answered in Stack Overflow:

http://stackoverflow.com/questions/8496235/making-navigation-links-highlight-when-relevant-element-passes-underneath-it-us

 

Hope this helps!

Thanks, that handles the scroll to functionality, but I still need to fix the nav bar once it hits the top of the screen?

The fixed navigation/header is CSS when scrolling happens:

 

 

position: fixed;

top: 0px;

z-index: 20;

 

The click effect is jQuery scroll, info here on how to do this: http://stackoverflow.com/questions/6677035/jquery-scroll-to-element

 

Hope this helps further.

thanks again for the help. Yeah I don't want the nav bar permanently fixed, only once it hits the boundary of the top of the screen. not sure it's possible with CSS alone as it's properties change at that point (when it hits the top of the screen)

Arr I see sorry, yes CSS won't be enough. You will need to apply the CSS I added above (quoted) on a jQuery scroll (http://api.jquery.com/scroll/). This will detect when you are scrolling and you will need to apply the CSS using jQuery - Amend DIV etc.

Don't suppose you could take a look at the site I'm working on? I'm not great with jQuery. I've managed to get the scrolling functionality working ok, but I wouldn't know where to start with writing the code that will fix the position of the nav bar once it hits the top of the screen.

 

http://www.onyxfinance.co.uk/what-we-do/

 

Just to excuse myself, the website is a shameless rip off of mailchimp's design, which isn't my own doing but I have to work with it :-/

The best way I have found/think off would be something like this:

 

<script>

 

$(window).scroll(function(e){

$el = $('.fixedElement');

if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){

$('.fixedElement').css({'position': 'fixed', 'top': '0px'});

}

 

 

});

</script>

 

Just need to change the class/ID's in the code above to match yours.

Thanks! It kind of works, lol. Once it hits the top of the page, it's style changes (which I need to tweak as it sits flush to the top left corner and I need it centred). but the big thing, is it stays like that permanently, and doesn't go back to it's original state if you scroll back down?

You will need to add this to that bit of JS:

if ($(this).scrollTop() < 200 && $el.css('position') != 'relative'){

$('.fixedElement').css({'position': 'relative'});

}

That should work, add it under:

if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){

$('.fixedElement').css({'position': 'fixed', 'top': '0px'});

}

Thats worked, thanks I really appreciate your help. I'm still struggling to get the bar centered when it becomes fixed. This is what I've got:

 

$(window).scroll(function(e){
  $el = $('.page-top-nav');
  if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
 $('.page-top-nav').css({'position': 'fixed', 'top': '0px', 'width': '960px', 'margin': '0 auto' });
  }

  if ($(this).scrollTop() < 200 && $el.css('position') != 'relative'){
$('.page-top-nav').css({'position': 'relative'});
 }

I think you need to have that <nav> tags within a container div with the width:###px; margin: 0 auto; - That should make it work in the middle of the screen as you want it too.

Brilliant, that's sorted it. The only issue I have now, is that the fixed menu now covers the the content it was instructed to scroll to in the 1st place by a margin of it's own height. Is there some way I can use the code to apply some sort of buffer to prevent this?

You need to move this:

<nav class="page-top-nav">*EVERYTHING IN IT*</nav>

Above this:

<div id="main-content">*EVERYTHING IN IT*</div>

 

At the moment you have it the other way round and that causes the issue. Hope this helps

The html structure is a bodge job hangover from the homepage's code, so it's not very semantic, so although it says main-content, it's not actually where the main content is and just houses the page title. I'm going to re-write the page templates so they make more sense. I'll get back to the scrolling issue once that's done as it will get extra confusing otherwise

Cool, let us know how it goes and send us an update