search

imakewebthings / waypoints

Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
http://imakewebthings.com/waypoints/
10.38k stars 1.34k forks source link

Sticky: Add option to have a different waypoint as the sticky element [PullRequestAvailable] #528

Open axe312ger opened 7 years ago

axe312ger commented 7 years ago

I often had the case, that I wanted to use the sticky shortcut. But mostly it was useless, since I wanted some other element to trigger the sticky, not the element itself.

For example a header above a slideshow. The header should get stuck after the slideshow, not directly when opening the page and overlaying the images in the slideshow.

Api changes

stickyElement new option for sticky plugin. Fallback is the normal element option, so the plugin behaves as before when this new option not set.

Code changes

In https://github.com/imakewebthings/waypoints/blob/master/src/shortcuts/sticky.js#L21 we should use stickyElement if it is set, otherwise just use the wrapper.

What do you guys think? I will provide a pull request when somebody else could use this feature :) Would love to see it in 4.1.0

tilwinjoy commented 7 years ago

I have similar use case as well. When the top of a huge section scrolls into view, I need to make an element at the bottom of this section (outside viewport) stick to the bottom of the viewport.

At the moment I have to make the waypoint on the top of this huge section and then do the stuff that sticky does on the other element manually... This seems like a solid use case.

axe312ger commented 7 years ago

@tilwinjoy Feel free to try my branch/PR: #529

The only issue while using css animations with my branch was that the wrapper height was reset to early. So I came up with this:

const waypoint = new window.Waypoint.Sticky({
  element: $('#header')[0],
  triggerElement: $('#header-waypoint')[0],
  handler: function (direction) {
    this.$wrapper.height(this.$element.outerHeight(true))
    this.$element.toggleClass('unstuck', direction === 'up')
  }
})

unstuck triggers the hide animation of the header

rdrewniak commented 7 years ago

@axe312ger, I've implemented your branch and found it extremely useful. Thank you very much for that. I am, however, experiencing some issues (more likely than not, it's caused by my implementation or a logic error). Could I pick your brain to try and decypher where I'm going wrong with all of this?

I have it rigged up so that there's a sticky trigger element which is dynamically positioned to be the exact viewport height from the bottom of the containers that I want to stick. This way, I can have the "stuck" class fixed to the bottom of the screen, as opposed to the top.

It appears that as long as the content spans a larger height than the viewport, it seems to work fine. but if the content is smaller than the viewport, it seems to jump to the top of the screen (most times from about the halfway mark). Here's the URL for my development site. Could I trouble you to have a peek at my site, and see if there's anything that's jumping out at you that I haven't got working quite right?

I know it's a ridiculously ambiguous question, but I'm at my wits end, and I don't even know where to begin fixing this.

[http://cirys.g-squareddev.com/]

axe312ger commented 7 years ago

I guess you should place the sticky trigger outside of the element you actually attach “stuck” to. So u avoid confusing waypoints with the actual trigger position.

On 17 Nov 2016, at 21:16, Ryan Drewniak notifications@github.com wrote:

@axe312ger https://github.com/axe312ger, I've implemented your branch and found it extremely useful. Thank you very much for that. I am, however, experiencing some issues (more likely than not, it's caused by my implementation or a logic error). Could I pick your brain to try and decypher where I'm going wrong with all of this?

I have it rigged up so that there's a sticky trigger element which is dynamically positioned to be the exact viewport height from the bottom of the containers that I want to stick. This way, I can have the "stuck" class fixed to the bottom of the screen, as opposed to the top.

It appears that as long as the content spans a larger height than the viewport, it seems to work fine. but if the content is smaller than the viewport, it seems to jump to the top of the screen (most times from about the halfway mark). Here's the URL for my development site. Could I trouble you to have a peek at my site, and see if there's anything that's jumping out at you that I haven't got working quite right?

I know it's a ridiculously ambiguous question, but I'm at my wits end, and I don't even know where to begin fixing this.

[http://cirys.g-squareddev.com/ http://cirys.g-squareddev.com/]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261357320, or mute the thread https://github.com/notifications/unsubscribe-auth/ABqBQiwaN8Y6vbEuvmz_kTCBvLfuP6mUks5q_LY4gaJpZM4KbKgz.

rdrewniak commented 7 years ago

So, in essence, having the triggers placed between each of the sticky wrappers, instead of within the sticky element?

On Nov 17, 2016, at 1:23 PM, Benedikt Rötsch notifications@github.com wrote:

I guess you should place the sticky trigger outside of the element you actually attach “stuck” to. So u avoid confusing waypoints with the actual trigger position.

On 17 Nov 2016, at 21:16, Ryan Drewniak notifications@github.com wrote:

@axe312ger https://github.com/axe312ger, I've implemented your branch and found it extremely useful. Thank you very much for that. I am, however, experiencing some issues (more likely than not, it's caused by my implementation or a logic error). Could I pick your brain to try and decypher where I'm going wrong with all of this?

I have it rigged up so that there's a sticky trigger element which is dynamically positioned to be the exact viewport height from the bottom of the containers that I want to stick. This way, I can have the "stuck" class fixed to the bottom of the screen, as opposed to the top.

It appears that as long as the content spans a larger height than the viewport, it seems to work fine. but if the content is smaller than the viewport, it seems to jump to the top of the screen (most times from about the halfway mark). Here's the URL for my development site. Could I trouble you to have a peek at my site, and see if there's anything that's jumping out at you that I haven't got working quite right?

I know it's a ridiculously ambiguous question, but I'm at my wits end, and I don't even know where to begin fixing this.

[http://cirys.g-squareddev.com/ http://cirys.g-squareddev.com/]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261357320, or mute the thread https://github.com/notifications/unsubscribe-auth/ABqBQiwaN8Y6vbEuvmz_kTCBvLfuP6mUks5q_LY4gaJpZM4KbKgz.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261359028, or mute the thread https://github.com/notifications/unsubscribe-auth/AJZaB8bOcPnN0sjr_LFbAKWO5h6SYECJks5q_LfOgaJpZM4KbKgz.

axe312ger commented 7 years ago

Yes i guess that might fix your issue. I see the problem only happening at your second sticky background.

On 17 Nov 2016, at 21:43, Ryan Drewniak notifications@github.com wrote:

So, in essence, having the triggers placed between each of the sticky wrappers, instead of within the sticky element?

On Nov 17, 2016, at 1:23 PM, Benedikt Rötsch notifications@github.com wrote:

I guess you should place the sticky trigger outside of the element you actually attach “stuck” to. So u avoid confusing waypoints with the actual trigger position.

On 17 Nov 2016, at 21:16, Ryan Drewniak notifications@github.com wrote:

@axe312ger https://github.com/axe312ger, I've implemented your branch and found it extremely useful. Thank you very much for that. I am, however, experiencing some issues (more likely than not, it's caused by my implementation or a logic error). Could I pick your brain to try and decypher where I'm going wrong with all of this?

I have it rigged up so that there's a sticky trigger element which is dynamically positioned to be the exact viewport height from the bottom of the containers that I want to stick. This way, I can have the "stuck" class fixed to the bottom of the screen, as opposed to the top.

It appears that as long as the content spans a larger height than the viewport, it seems to work fine. but if the content is smaller than the viewport, it seems to jump to the top of the screen (most times from about the halfway mark). Here's the URL for my development site. Could I trouble you to have a peek at my site, and see if there's anything that's jumping out at you that I haven't got working quite right?

I know it's a ridiculously ambiguous question, but I'm at my wits end, and I don't even know where to begin fixing this.

[http://cirys.g-squareddev.com/ http://cirys.g-squareddev.com/]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261357320, or mute the thread https://github.com/notifications/unsubscribe-auth/ABqBQiwaN8Y6vbEuvmz_kTCBvLfuP6mUks5q_LY4gaJpZM4KbKgz.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261359028, or mute the thread https://github.com/notifications/unsubscribe-auth/AJZaB8bOcPnN0sjr_LFbAKWO5h6SYECJks5q_LfOgaJpZM4KbKgz.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261363659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABqBQqczCtop_sSJi_lFQuK2wvzPwbDfks5q_LxngaJpZM4KbKgz.

rdrewniak commented 7 years ago

That seems to have worked. Thanks a million for your help! :-)

On Nov 17, 2016, at 1:44 PM, Benedikt Rötsch notifications@github.com wrote:

Yes i guess that might fix your issue. I see the problem only happening at your second sticky background.

On 17 Nov 2016, at 21:43, Ryan Drewniak notifications@github.com wrote:

So, in essence, having the triggers placed between each of the sticky wrappers, instead of within the sticky element?

On Nov 17, 2016, at 1:23 PM, Benedikt Rötsch notifications@github.com wrote:

I guess you should place the sticky trigger outside of the element you actually attach “stuck” to. So u avoid confusing waypoints with the actual trigger position.

On 17 Nov 2016, at 21:16, Ryan Drewniak notifications@github.com wrote:

@axe312ger https://github.com/axe312ger, I've implemented your branch and found it extremely useful. Thank you very much for that. I am, however, experiencing some issues (more likely than not, it's caused by my implementation or a logic error). Could I pick your brain to try and decypher where I'm going wrong with all of this?

I have it rigged up so that there's a sticky trigger element which is dynamically positioned to be the exact viewport height from the bottom of the containers that I want to stick. This way, I can have the "stuck" class fixed to the bottom of the screen, as opposed to the top.

It appears that as long as the content spans a larger height than the viewport, it seems to work fine. but if the content is smaller than the viewport, it seems to jump to the top of the screen (most times from about the halfway mark). Here's the URL for my development site. Could I trouble you to have a peek at my site, and see if there's anything that's jumping out at you that I haven't got working quite right?

I know it's a ridiculously ambiguous question, but I'm at my wits end, and I don't even know where to begin fixing this.

[http://cirys.g-squareddev.com/ http://cirys.g-squareddev.com/]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261357320, or mute the thread https://github.com/notifications/unsubscribe-auth/ABqBQiwaN8Y6vbEuvmz_kTCBvLfuP6mUks5q_LY4gaJpZM4KbKgz.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261359028, or mute the thread https://github.com/notifications/unsubscribe-auth/AJZaB8bOcPnN0sjr_LFbAKWO5h6SYECJks5q_LfOgaJpZM4KbKgz.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261363659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABqBQqczCtop_sSJi_lFQuK2wvzPwbDfks5q_LxngaJpZM4KbKgz.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/imakewebthings/waypoints/issues/528#issuecomment-261363948, or mute the thread https://github.com/notifications/unsubscribe-auth/AJZaB3f1Yq_zV1RtSkMGrXhJor1rq4Iyks5q_LyygaJpZM4KbKgz.

axe312ger commented 7 years ago

Hey there @imakewebthings, looks like people enjoy my pull request. Any chance to get it merged? :)

axe312ger commented 7 years ago

Everyone who is looking for the code, can find it here: https://github.com/imakewebthings/waypoints/pull/529