Sticky top bar causing page to spazz out

[toddheslin]

I'm totally loving FoundationPress. However I've come across an odd circumstance where a fixed top bar that looks like this: <div class="top-bar-container fixed sticky"> will have some serious issues with fast scrolling. I've noticed this across iOS, Chrome (Mac) and Safari (Mac). See video for example with the sticky on - problem, and sticky off - no problem.

Any ideas?
https://www.dropbox.com/s/q3ufp6viaftivz0/Sticky%20Top%20Bar.mp4?dl=0

[toddheslin]

So I found some more evidence that might lead to solving the problem. It's actually when any post has been made 'sticky' within the index page. I might review the code to see if it's obvious how the sticky posts work, but for now I'll turn it off to keep my site smooth.

Looking forward to anyone else's experiences.

[colin-marshall]

Haven't experienced this. Is there possibly a conflicting sticky class?

[colin-marshall]

Ya that's probably the issue:

The post_class() outputs the class="whatever" piece for that div. This includes several different classes of value: post, hentry (for hAtom microformat pages), category-X (where X is the slug of every category the post is in), and tag-X (similar, but with tags). It also adds "sticky" for posts marked as Sticky Posts.
Source: https://codex.wordpress.org/Sticky_Posts

[toddheslin]

Oh that would explain it. Sticky in the header and sticky in the post. Boom. I'll close this off as a workaround could be found without making this an issue with this repo.

[colin-marshall]

I wouldn't close it just yet. Since sticky posts are a part of WordPress core this could end up being a recurring conflict for FoundationPress users. I wonder if it's possible to add a hook to FP to make WordPress output a class called .sticky-post instead of .sticky.

[toddheslin]

Okay, I guess so. However as we're just on the edge of foundation 6, the implementation is different. I've tried to use the 'sticky' within F6 however however this is for a different purpose. Instead, (I believe) the right implementation is Magellan
http://foundation.zurb.com/sites/docs/magellan.html

Happy to reopen if you think I should :)

[colin-marshall]

They will be adding sticky functionality to the top-bar in a future release of F6. I asked them about it last week. I think as long as .sticky is a class in Foundation and as long WordPress spits out the .sticky class there's going to be conflicts. You can test it out with Magellan, but that also uses the .sticky class so I wouldn't be surprised if there's a conflict there too.

[toddheslin]

Convinced. Reopening.

[colin-marshall]

Thanks! If you get a chance to test it out with F6 and Magellan, please fill us in on your findings.

IMO the ideal way to do this would be to change the class WordPress outputs so that FoundationPress remains consistent with Foundation docs. I opened a question on Stack Overflow: http://stackoverflow.com/questions/34150105/assign-a-class-other-than-sticky-for-sticky-posts

Feel free to upvote it to increase the chance it gets answered 😉

[colin-marshall]

Wow I got an answer on there fast. Would you mind testing it by adding the following to your functions.php?:

function change_sticky_class($classes) {
  $classes = array_diff($classes, array("sticky"));
  $classes[] = 'sticky-post';
  return $classes;
}
add_filter('post_class','change_sticky_class');

Thanks!!!

[ghost]

Why would we strip down WordPress fuctionality? .sticky post class is a must in every WordPress theme. Could we create a new sticky mixin for the topbar, like .top-bar-container .fixed .sticky-noconflict?

[Aetles]

+1 on mixin instead of removing WordPress .sticky.

[colin-marshall]

The name of that function may have been confusing, so I edited that post. It doesn't strip down WordPress functionality at all. It changes it so that WordPress uses .sticky-post (or whatever you want it to be) instead of .sticky. I'm definitely not suggesting to remove the class.

[Aetles]

True. I thought maybe there could be compatibility issues with core WordPress (css or js) if that name is changed, but that does not seem to be the case, it's all handled by the theme anyway. So the only issue would be backward compatibility with old FoundationPress (or css code copied from other themes), but then again changes in FP is constantly breaking backward compatibility anyway… 😄

(I don't know if there are plugins that rely on the sticky class name, though.)

[ghost]

👍

[colin-marshall]

@eccola, @Aetles, @josh-rathke, @toddheslin, @olefredrik:

If I make a pull request that alters the classname for sticky posts, what do you guys think I should use for the classname? I was thinking .sticky-post, .wp-sticky, or .wp-sticky-post. Throwing wp- on the front of it might help to namespace it. Of course you could always change it to whatever you want in your own FP projects.

[joshrathke]

I think since it's a WordPress theme it makes sense. I have seen several
instances of people using foundation on WordPress having to do this. It's
even (not so WordPress specifically) in the documentation that the
likelihood of needing to change it is good depending on the environment you
are developing in.

Josh Rathke
I.T. Director & Web Developer, YWAM Montana | Lakeside
p: (406) 844-2221 m: (765) 637-5847 a: 501 Blacktail Rd. Lakeside MT, 59922
s: www.ywammontana.org e: [email protected]

On Fri, Dec 11, 2015 at 2:53 PM, Colin Marshall [email protected]
wrote:

@eccola https://github.com/Eccola, @Aetles https://github.com/Aetles,
@josh-rathke https://github.com/josh-rathke, @toddheslin
https://github.com/toddheslin, @olefredrik
https://github.com/olefredrik:

If I make a pull request that alters the classname for sticky posts, what
do you guys think I should use for the classname? I was thinking
.sticky-post, .wp-sticky, or .wp-sticky-post. Throwing wp- on the front
of it might help to namespace it. Of course you could always change it to
whatever you want in your own FP projects.

—
Reply to this email directly or view it on GitHub
#577 (comment)
.

[olefredrik]

@colin-marshall : Would be awesome if you could make a pull request that alters the classname for sticky posts. I think it makes sense to add a wp- on the front of it.

[colin-marshall]

@olefredrik PR submitted: #618. I fixed the build errors too.

[olefredrik]

Awesome!