Hello!

I've been doing well so far getting my site set up since Inger got me past my first major hurdle!

I'm using the Greenfield template and I have some javascript in the footer code that applies to the .navbar-section as part of creating a "sticky" menu.

This applies to every page but I need to make a slight alteration for the homepage, so my plan would be to have unique js for the homepage.

Do I need to make a special class (or subclass) of navbar for the homepage? If so, how do I do that? Obviously, I want the homepage navigation section to still to be connected to the rest of the site in every other way so that when I make changes to the menu, styling, etc, the changes apply globally (ideally).

Thanks!

What is the "slight alteration" you are wanting to do?

It's just a slight alteration to the js for the homepage for when the "sticky" menu gets activated based on the scroll behavior. I need to experiment a bit, but for now I'm planning that the it may only be a change in the number of pixels the user needs to scroll before it appears. So the whole difference is only a numeric pixel difference when on the home page.

(It had occurred to me just to have the same js for the element on every page but specifying the difference if on the homepage within the js.)

Thanks.

I wasn't sure whether that solution had been found difficult in SD, or whether it had been considered not worthwhile. The attached project file shows that it is very simple to do.

Frank

Thanks so much, Frank!

I'll go down this route and let you know how it turns out!

OK, yes, that worked perfect!

Thanks so much, that was very helpful.

Oops...

One little big problem...

The code I put together might not have perfect syntax but works just how I want on external preview...Nav gets "active" properties applied on scroll of 50 px on regular pages, 500 px on homepage, active properties removed when you scroll back up.

But on publishing, it works fine except that it's not distinguishing that I'm on the homepage, so I'm not getting the 500 px scroll before active properties on the homepage. I suppose, obviously enough, because I don't have the word index appearing in my URL. It's just the .com and there is no trailing slash (I point that out because that's another way people detect the homepage).

This is the code I have now: https://pastebin.com/5MThpeE9

Any other suggestions for testing for homepage?

In the attached version of my previous project file I
(a) added to the home page a container with display:none and a class name of home-test;
(b) I changed the conditional line in my JavaScript to test for the existence of that container.

Frank

Ok great...

I tried something like that but I couldn't get it to work, so I'm excited to see your implementation! Going to try this out now!

Thank-you!

Ugh...

Not working...And I can't figure out why...Implemented your new code line with the test (and yes I remembered the .home-page container, also cleared cache, etc). Works as expected on external preview but not when published.

And again, the internal preview is working differently than the external preview. The internal preview is matching the published behavior.

Could there be any clues from the differences in the internal preview and external preview?