Strategy for triggering inview on load

[ryanburnette]

I'm looking for a strategy for triggering the inView event on load.

Here's my situation. I bring in an affixed nav if the site's header isn't in view.

$header.on('inview', function (event, isInView) {
  if ( isInView ) {
    deactivate(); // deactivate the affixed nav
  }
  else {
    activate(); // activate the affixed nav
  }
});

My issue is that this code doesn't trigger as expected on load. When a page loads scrolled I have to scroll the $header element into view then wait for it to go back out of view for the acivate() method to be called.

Initially I tried triggering the inview event on page load, but it causes activate() to be erroneously called then deactivate() to be called afterwards.

[ryanburnette]

For now I'm just manually checking to see if the viewport is scrolled past the element. It's a simple situation being that the element in question occupies the very top of the body. I'd love to know a better approach for future situations though.

$(window).on('load', function () {
  if ( $(window).scrollTop() > $header.height() ) {
    activate();
  }
});

[andypillip]

I second this.

A nice way would also be if the actual code to check if an element is in view would be populated, so one could use it from outside the event.

[andypillip]

Btw ryan, when you trigger the event manually the whole inview-logic is bypassed – hence you need to pass the inview parameter yourself.

Since you don't pass anything, your first condition will never be satisfied, and activate() will be called.

[andypillip]

@ryanburnette I just commited a pull request that fixes this issue: 1e4bf03

Actually the inview event should be fired initially as well, but due to a mistake in code only for elements that are or have been in view.

[LeisureLarry]

@andypillip Thanks for the solution. Manually patching the code, fixed the problem for me.