lcdsantos/menuspy

A JavaScript library to make navigation menus highlight the item based on currently in view section.

menuspy's Issues

'unexpected token import'

I think it needs transpiling, right?

Could you possibly add this to the README.md? Looks like even the latest Version of Chrome doesn't support import:

Conflict with VueJS

As soon as I initiate VueJS on any of the ancestor elements of the nav, the active class is no longer added to the active item. The hash is still updated.

https://codepen.io/paweldecowski/pen/VRxawX

Try commenting out VueJS initialisation and it works fine. But with it, it doesn’t work.

Side Menu : Nice to have - all section title visible

That could be useful to see all section title even if not active as it is not intuitive to have no title...

header > nav > ul > li > a structure in mandatory?

Hello. I had this markup and plugin worked incorrect nav > a

After I add markup from example it begin to work.

Is this structure is mandatory?

New option: change the parent selector

Is it possible to add to your options a new one to select the parent selector ?
Right now, select the page's height but it could be better to select a container.
For exemple, if you want a full page height (100vh) and in this page, you have a container with a "overflow: scroll-y". So you should select the height of this container and make your maths with this because the page is not scrolling but the content of your container is.

Great job for your package dude.

Can't add an offset to use it with a fixed navbar

Hi, I don't know if you are going to reply to this, but your library is very helpful to me actually, I'm new to JS so maybe is a fault of mine, so. I tried to put an offset every time a clicked but the navbar conflicts with the start of the div that I want to see, how can I fix this or is it an issue?

Example in the image:

lavamenu /height to auto

Height is auto, click error

side-menu/ height to 100vh

Hello!

Awesome scroll! But customizing height to 100vh on section properties broke the navigation. Only works with 1080px? I just want to fill exact 100% browser height

Original:
section {
height: 1080px;
color: #FFF;
text-align: center;
}

Custom:
section {
height: 100vh;
color: #FFF;
text-align: center;
}

How to refresh/update calculations ?

I am using menuspy with scrollmagic library. Since scrollmagic creates pinned scenes, it changes the height of each scene when one is activated by scrolling to its position.

I would like to have menuspy update its calculations when a scene is activated, because right now it is not aware of changed dimensions and it goes through whole navigation while I am basically just scrolling through one of the sections.

I can put up an online demo of needed.

Greensock pin (seems to be) conflicting with MenuSpy – any suggestions?

Hi there,

When I pin a section using gsap, I believe it's causing MenuSpy to have trouble calculating when an ID hits the top of the viewport.

Here's a minimal codepen demo: https://codepen.io/scallemang/pen/NWgaNVv. As you'll see, once we hit the 'Pinned 1' section, following sections become active earlier than they should.

Do you have any suggestions on how I could resolve this? Thank you so much in advance.

Side Menu : Bug section title problem after page refresh

Hi,

There is a problem after page refresh

How to reproduce :
https://leocs.me/menuspy/examples/sidemenu.html
click on the latest bullet (section-3)
refresh the page
click on any other bullet let say section-2
the section title 3 stay active while section are changing

Provide a destroy method

I have a SPA and I don't want Menuspy on other pages beside where I exactly put it.
Right now, even if I navigate from the page where I required menuspy, it still exist.
Please provide a method to destroy menuspy.

Smooth scrolling option

I wonder about such an option.
It doesn't seem to be possible with a callback as well though.
Thanks

Feature Request: Add Callback: When switching to NO "active" element

Hi,

MenuSpy is great. Very performant and easy to use, as promised!

I implemented the Lavalamp effect (from the example) and that was pretty easy too.

But I ran into a snag when I needed to hide.lavalamp in the condition where no menu item is active. In my case, MS had removed .active for all menu items, but the .lavalamp remains in its last state (width and height set to the values from lastInViewElm).

I can't think of how to effect this remote item (i.e.: Not nested inside of an .active element or under the direct control of MS) in this case since the MS callback only fires when a new active element is assigned (as per the Docs and Source).

So I've been trying to figure out how to detect when no element is active without performance implications (i.e.: Not resorting to an on scroll handler and checking repeatedly for ms.lastInViewElm == null).

Questions:

• Have I boiled this down correctly?
• Is there an alternate method, that I haven't thought of, to accomplish the same? (I have a feeling this is the case. If true: Sorry in advance.)
• Possible Feature Request: Have the callback also fire when MS switches from an active element to no active element.

Thanks!

Option to turn off anchors?

Hello. Am I able to turn off hash anchors changes entirely? I experience weird behavior with it. I am using menuspy together with moveto.

For example, hashTimeout: 0 does not work at all.