Sticky bar styles applied even when you're at iphone size

[brianboyer]

need to move this into a media query or something

[brianboyer]

so on the phone, we shouldnt honor the affix mode styles... maybe we need to copy the affix styles back into the media query? hmmmmm

[dannydb]

Still seeing this? I made a change to prevent the affix plugin from running on smallscreens. This seems to be a duplicate of #405.

[alykat]

Still seeing this. Screenshot: https://www.dropbox.com/s/qqxso1iq85fgq2o/sticky-header-on-iphone.png

In my quick testing this evening:

• If I start the window large, refresh the page, and resize the window to small, and then scroll down, the sticky header/styles appears.
• If I start the window small, refresh the page, and then scroll down, the sticky header/styles does NOT appear.
• Couldn't get it to happen on my phone.

[dannydb]

Ah... yes. The function that kills affix only fires on page load. We can certainly bind it to the window resize event as well.

[dannydb]

I see a few attack vectors for this. Keep in mind we are dealing with an edge case of users who cross the 768px window width line after page load. In my mind this group is limited to nerds kicking the tires on the responsive functionality and maybe some android phones or tablets on orientation change. Here are the choices:

1. Move sticky bar styles back into a media query and duplicate in an IE8 conditional stylesheet. This is lousy in that any changes to the sticky bar styles will have to be made in two places going forward.
2. Prevent event propagation of the scroll event under a certain window width. Works well, but I'm concerned about unanticipated consequences of overriding core browser functionality like this.
3. Unbind the affix listener when a window loads at a width over 768px and the user sizes down. I haven't figured out a good way to reinitialize the affix plugin if and when the window width increases beyond 768px after unbinding.
4. Add a class higher in the dom to act as a media query specific to the affix styles like .allow-affix. Prefix that class on all the existing sticky styles and switch the class on and off on the window resize event depending on the window width. This looks like the best option to me.

[brianboyer]

Meh. If its only for our peers and their browser playing, this is low priority.

On Saturday, November 3, 2012, Danny DeBelius wrote:

I see a few attack vectors for this. Keep in mind we are dealing with an edge case of users who load the page at a width above 768px and after page load size down below 768px. In my mind this group is limited to nerds kicking the tires on the responsive functionality and maybe some android phones or tablets on orientation change.

1.

Move sticky bar styles back into a media query and duplicate in an IE8 conditional stylesheet. This is lousy in that any changes to the sticky bar styles will have to be made in two places going forward. 2.

Prevent event propagation of the scroll event under a certain window width. Works well, but I'm concerned about unanticipated consequences of overriding core browser functionality like this. 3.

Unbind the affix listener when a window loads at a width over 768px and the user sizes down. I haven't figured out a good way to reinitialize the affix plugin if and when the window width increases beyond 768px after unbinding. 4.

Add a class higher in the dom to act as a media query specific to the affix styles like .allow-affix. Prefix that class on all the existing sticky styles and switch the class on and off on the window resize event depending on the window width. This looks like the best option to me.

— Reply to this email directly or view it on GitHubhttps://github.com/nprapps/electris/issues/440#issuecomment-10041172.