Trying to Change Nav Bar color when scrolling down the page after hero image.

[kcarpintieri]

Hi there,
I am trying to make my webpage template more interactive with some Javascript. One of the things I am trying to do is change the nav bar background once scrolled past the main hero image. I currently have some javascript created but nothing seems to be working. I would love to know if you can lead me to some resources or can help me out.

Preview page:
https://app.hubspot.com/design-previewer/73917/templates/8768636370

Javascript:
$(window).scroll(function(){ $('dark-blue').toggleClass('blue', $(this).scrollTop() > 800); ]};

Thanks, Krystal

[MitchL]

I also noticed that your mobile navigation gets obstructed by your header. You can fix this by adding "z-index: 1000;" to the css of the mobile navigation (#mobile-nav)

[kcarpintieri]

Thanks for figuring out the mobile navigation issue - almost forgot about that!

And I tried the code you suggested - not sure if it did anything. I'm noticing a syntax error in my inspect panel that might be relating to the javascript. Thoughts?

https://learn.barcoding.com/-temporary-slug-e6b0d6ec-ac7a-47b0-8d6b-abd5bfd93551?hs_preview=erbhUTDF...

[MitchL]

Was just taking a peek, and here's what I think the function should be exactly:

var topofDiv = $(".hero-image").offset().top; 
var height = $(".hero-image").outerHeight();

$(window).scroll(function(){
    if($(window).scrollTop() > (topofDiv + height)){
        $('.main-nav').addClass('blue');
    }
    else{
        $('.main-nav').removeClass('blue');
    }
});

You're going to want to delete this old function (which is where the syntax error is coming from) :

$(window).scroll(function(){
$('dark-blue').toggleClass('blue', $(this).scrollTop() > 800);
]};

[kcarpintieri]

I'm still not seeing any changes, and I still have an error in the inspect panel:

Uncaught TypeError: $ is not a function

[MitchL]

Hmm, okay try this:

jQuery(document).ready(function($){
var topofDiv= $(".hero-image").offset().top;

var height= $(".hero-image").outerHeight();

$(window).scroll(function(){

    if($(window).scrollTop()>(topofDiv+height)){
        $(".main-nav").addClass("blue")
        }else
        {
            $(".main-nav").removeClass("blue")
            }
        });
});

[kcarpintieri]

Okay, that is getting somewhere! Maybe the class just has to be different since it's only around the links? (I want it to be the whole navigation bar where it's the dark blue).

[MitchL]

I'm not sure why this isn't working for you: 

var topofDiv = $(".hero-image").offset().top; 
var height = $(".hero-image").outerHeight();
  
$(window).scroll(function(){
    if($(window).scrollTop() > (topofDiv + height)){
        $('.main-nav').addClass('red');
    }
    else{
        $('.main-nav').removeClass('red');
    }
});

Because here's a quick example I whipped up using this code: 

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

[kcarpintieri]

I think it is working - it's just not applying to the entire navigation bar. 

[MitchL]

Okay, I see why. That small section is wrapped with the "main-nav" class, while the whole nav is wrapped with "main-nav," (with a comma on the end). Is this a typo in the template editor?

[MitchL · Accepted solution]

Yeah I can confirm that the navigation has two classes with commas (typos) on the end: "main-nav," and "blue,". 

So removing the comma ton make it "main-nav" will get it to work; however, it will make the styling from the smaller "main-nav" apply to the whole thing - which includes being hidden on mobile.

A  complete solution would be to remove the "main-nav," and "blue," classes from the whole nav and then apply a different class like "main-nav-wrapper".  Then change the jquery function to:

jQuery(document).ready(function($){
var topofDiv= $(".hero-image").offset().top;

var height= $(".hero-image").outerHeight();

$(window).scroll(function(){

    if($(window).scrollTop()>(topofDiv+height)){
        $(".main-nav-wrapper").addClass("blue")
        }else
        {
            $(".main-nav-wrapper").removeClass("blue")
            }
        });
});

Then you should be good to go.

[kcarpintieri]

Wooo! Problem solved - thanks!! Have a great day! 

[MitchL]

You betcha! I also may have led you astray with the mobile menu solution. I don't think theres a way to close it right now haha.

[kcarpintieri]

Do you know how to fix that?!

[MitchL]

Hey @kcarpintieri,

Could you post a preview link of the page. The link you've attahced can't be accessed without the account credentials. 

[kcarpintieri]

Hi Mitch,

Here is a preview link: http://learn.barcoding.com/-temporary-slug-e6b0d6ec-ac7a-47b0-8d6b-abd5bfd93551?hs_preview=erbhUTDF-...

[MitchL]

I think something like this should work:

var topofDiv = $("#hero-image").offset().top; 
var height = $("#hero-image").outerHeight();

$(window).scroll(function(){
    if($(window).scrollTop() > (topofDiv + height)){
        $('#navigation').addClass('blue');
    }
    else{
        $('#navigation').removeClass('blue');
    }
});

  

 where "#hero-image" should we switched out for the id or class of your hero image and "#navigation" is your main naviagation