asked on

Fixed Nav Bar in AngularJS

I am trying to replicate this type of Nav bar approach in AngularJS. I've been searching everywhere to try to figure out how to do it, but I'm not getting anywhere.

Can somebody lead me in the right direction for how to replicate this top of Nav bar that.

1. Shows transparent on a home page with a full image.
2. Then switches to White and locks in across the top (with the page text moved down) once you start scrolling.

This page shows what I'm trying to accomplish.
http://www.onetreedesign.ca/butter/

Thanks.

SOLUTION

Mikkel Sandberg

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Paul Konstanski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mikkel Sandberg

If you want a basic hiding nav bar like the example in that link, here's one I made using jQuery: http://codepen.io/MikkelSandbag/pen/wMXMma
This is the pertinent jQuery code:

var initScroll = 0;

$(window).on('scroll', function() {
  if ($(window).scrollTop() <= initScroll) {
    console.log('going up');
    $('header').removeClass('hide');
  } else {
    console.log('going down');
    $('header').addClass('hide');
  }
  
  initScroll = $(window).scrollTop();
});

Open in new window

I'm an Angular novice - and I'm actually trying to learn Angular 2, which is a bit different than Angular 1.x - so I'm not sure how you would accomplish this only using Angular. I hope this helps though.

Paul Konstanski

ASKER

The question I asked talked specifically about AngularJS not jQuery. My second answer gets closer to what I was looking for.

My research also showed a lot of articles that talk about using directives to build your nav menu.