topic Re: Trying to Change Nav Bar color when scrolling down the page after hero image. in CMS Development

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

kcarpintieri — Thu, 11 Apr 2019 18:09:46 GMT

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&colon;
$(window).scroll(function(){ $('dark-blue').toggleClass('blue', $(this).scrollTop() > 800); ]};

Thanks, Krystal

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

MitchL — Thu, 11 Apr 2019 19:40:25 GMT

Hey @kcarpintieri,

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

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

kcarpintieri — Thu, 11 Apr 2019 19:43:16 GMT

Hi Mitch,

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

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

MitchL — Thu, 11 Apr 2019 19:47:19 GMT

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

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

MitchL — Thu, 11 Apr 2019 20:12:13 GMT

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)

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

kcarpintieri — Thu, 11 Apr 2019 20:19:42 GMT

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-8825532680

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

MitchL — Thu, 11 Apr 2019 20:22:46 GMT

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

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

kcarpintieri — Thu, 11 Apr 2019 20:28:35 GMT

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

Uncaught TypeError: $ is not a function

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

MitchL — Thu, 11 Apr 2019 20:30:26 GMT

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

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

kcarpintieri — Thu, 11 Apr 2019 20:39:48 GMT

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).

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

MitchL — Thu, 11 Apr 2019 20:49:40 GMT

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=519470&tc_deviceCategory=undefined&template_layout_id=8704940324&updated=1555012648520

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

kcarpintieri — Thu, 11 Apr 2019 21:02:59 GMT

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

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

MitchL — Thu, 11 Apr 2019 21:09:12 GMT

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?

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

MitchL — Thu, 11 Apr 2019 21:15:26 GMT

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.

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

kcarpintieri — Thu, 11 Apr 2019 21:18:16 GMT

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

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

MitchL — Thu, 11 Apr 2019 21:26:14 GMT

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.

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

kcarpintieri — Fri, 12 Apr 2019 11:51:35 GMT

Do you know how to fix that?!