Is it possible to use on a container with 'position:fixed'

[voodoo6]

Hi,

Is is possible to get this working with elements in a container that has position:fixed?
I'm trying to understand how the plugin works to see if its possible.

Thanks for any advice
Matt

[samatcd]

@voodoo6, Yes this works as-is for elements in containers with fixed positioning.

[voodoo6]

Hi, many thanks for the reply - I can't get it working on the project I'm working on at the moment (I was trying out the technique Chris Coyer used using your plugin on CSS tricks). I've uploaded the work in progress to show what I mean:

http://voodoo6.com/hellou/hellou-v4/topdeals.html

Resize your browser to LESS than 980px wide - notice when scrolling the '.come-in' class is successfully added by jquery-visible when expected.

Then resize your browser to OVER 980px wide - notice how the main content area (.main) now gets position:fixed applied using a media query. Now try scrolling - looking at the web inspecter in chrome, jquery-visible does not add the 'come-in' class as expected anymore - but if we remove the position:fixed, the plugin works as expected.

Any ideas why the position:fixed is causing problems?

I hope the description and demo make sense - let me know if not!

[samatcd]

You'll need to change your scroll trigger to target the element you're scrolling. You'll see that win.scroll is not fired when scrolling your section.main. The plugin is never getting triggered :-)

Adding this code makes it work perfectly:

var allDeals = $('.deal');
$('section.main').scroll(function(event) {
  allDeals.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in"); 
    } 
  });
});

In practice though, I'd unbind the scroll event off the window, and bind to section.main depending on the window width. Make sure you change your event binding when the window resizes past your 960 breakpoint using the resize event.

[voodoo6]

Of course!
That's a great help, many thanks for taking a look and for all your work on the plugin :)

On 16 Apr 2013, at 00:26, Sam Sehnert notifications@github.com wrote:

You'll need to change your scroll trigger to target the element you're scrolling. You'll see that win.scroll is not fired when scrolling your section.main. The plugin is never getting triggered :-)

Adding this code makes it work perfectly:

var allDeals = $('.deal');
$('section.main').scroll(function(event) {
allDeals.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});
In practice though, I'd unbind the scroll event off the window, and bind to section.main depending on the window width. Make sure you change your event binding when the window resizes past your 960 breakpoint using the resize event.

—
Reply to this email directly or view it on GitHub.