foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.64k stars 5.49k forks source link

[Magellan] Get the section id when we scroll to it? #10865

Closed anephew closed 6 years ago

anephew commented 6 years ago

Is it possible to get the section id when we scroll to it? Any data in magellan events?

ncoden commented 6 years ago

See the Javascript Reference of Magellan:

Name Description
update.zf.magellan Fires when magellan is finished updating to the new active element.

For example:

$('#myMagellan').on('update.zf.magellan', function($elem) {
  console.log('The magellan is now at ' + $elem.attr('id'));
});
anephew commented 6 years ago

@ncoden

Error in console: $elem.attr is not a function

Also, I do not see the id in the object. for example:

$('#magellan').on('update.zf.magellan', function(elem) {
 console.log(elem);
});
ncoden commented 6 years ago

You can try:


$('#magellan').on('update.zf.magellan', function(elem) {
   elem[0].getAttribute('id');
});
anephew commented 6 years ago

@ncoden

elem[0] is undefined 8(

anephew commented 6 years ago

@ncoden

This work, check it

$('#magellan').on('update.zf.magellan', function (ev, elem) { console.log(elem[0].getAttribute('href')); });

anephew commented 6 years ago

It's bad that the "update.zf.magellan" event happens more than once (4 and more more...) with manual scrolling (not by the menu link). UPD: with click on menu - it happens 2 times.. image

I have full height section of window. If I do a check on the id section (for example - to show/hide some block when we switched to it), then this block is hide/show several times. It looks like i need to use a third-party plug-in to determine what's in the browser vieweport now 8(