Make the sticky element full width

dyrobin
(@dyrobin)

9 years, 10 months ago
Hi Mark,

I have tried your plugin and it works quite well in my website. I will say many thanks to you. However, I would like to ask you that is it possible to add an option to make the sticky element full width since sometimes the original element is not full-width and it is better to set it full-width when it becomes sticky (This would be especially useful for navigation menu). After doing a bit research on your code, I found that it could be implemented by modifications of line 198 in the file “jq-sticky-anything.js”:
```
$('.sticky-element-original')
    .removeClass('sticky-element-active')
    .css('position','fixed').css('left', 0)
    .css('top',stickyTop+'px').css('width',"100%")
    .css('padding',paddingSticky)
    .css('margin-top',stickyTopMargin).css('z-index',stickyZindex);
```
If this modification works, I think it should be not complicated for you to add such an option on the configuration page. Do you think so?

One more comments on your plugin: it would be great if the function is triggered by scroll event instead of setInterval function. I think this might require much more work to change it.

Finally, thanks for your great work again 🙂

https://ww.wp.xz.cn/plugins/sticky-menu-or-anything-on-scroll/

Viewing 4 replies - 1 through 4 (of 4 total)

Senff – a11n
(@senff)

9 years, 10 months ago

Hi, thanks for trying my plugin and your suggestion!

I’m trying to understand what you’re trying to do though. The idea of the plugin, is that it will retain the same width the moment it becomes sticky. What you’re suggesting, sounds like having an element not full width when it’s not sticky, but full width when it is sticky. To be honest, I’ve never heard anyone request this feature. Could you clarify this? Perhaps with an example?

As for the scroll trigger vs. setInterval function: this was originally done because the performance of setInterval was better than onScroll — I used this page as a reference: https://medium.com/@dhg/parallax-done-right-82ced812e61c , especially this part:

Use an interval to update element positions. The scroll is called like a bajillion times a second and can cause crazy performance hiccups.

However, I’ve had reports that onScroll actually gives better performance, so I’ll look into this soon. I don’t think it makes that much of a difference so it’s not a critical issue at the moment, but I will look into it.

Thread Starter dyrobin
(@dyrobin)

9 years, 10 months ago

Hi,

thanks for your reply. I understand the idea that the plugin will retain the original width of the sticky element. However, when I tried your plugin to a navigation menu, I had a problem of “stacked” effect because that navigation menu is not full width originally and when it is sticky the left and right margins are occupied by following full-width content. This problem can be solved by setting the navigation menu to full width when sticky. And basically that’s why I suggest such a feature to make a toggle option to extend the sticky element to full-width.

Sorry that I can’t provide you my website as an example but I think this feature might be useful for those navigation menus that are not full-width. Maybe I am the only one who asks this feature but it doesn’t mean other guys don’t want it.

As for the onScroll event, yes, it will be triggered many many many times a second but the handler in this case should be quite simple (just to check the boundary then fix or unfix, right?) and most of the time the handler doesn’t need to do anything except checking. In contrast, the setInterval function here is invoked 100 times a second but each time it is invoked, it seems that a lot of code are executed. So the problem is which one is bigger? 2000×1 or 100×50? And obviously animation is different as the handler might be complex and that is why animation is suggested to use requestAnimationFrame. Following links talked something about this:
http://www.html5rocks.com/en/tutorials/speed/animations/
https://css-tricks.com/using-requestanimationframe/
Anyway, I agree with you that this is not a critical issue at the moment 🙂

Regards,

Senff – a11n
(@senff)

9 years, 10 months ago

I had a problem of “stacked” effect because that navigation menu is not full width originally and when it is sticky the left and right margins are occupied by following full-width content.

I’m still not really sure what this means — for all I know, it could be a bug in the plugin! I can’t say without seeing it though 🙁

From the way you describe it, it looks like the element is not full-width by default, but then becomes full width when sticky. I’m just having a hard time visualizing this, because it means it would change size between sticky and non-sticky…which is not what I intended for the plugin, because I specifically coded it to make sure it will keep the same look and feel, sticky or not.

But I probably just don’t understand it right! 🙂

So with that, it sounds like a very specific request, and not sure if that would warrant a general option in the plugin itself. I’d be happy to create a custom version of the plugin for you though (however, since you suggested some code changes yourself, I guess you would know your way around it yourself too).

When it comes to the scroll event thing: yeah you could be on to something. I’ll need to dig into the performance issue a lot, something I’m not all too familiar with, but who knows when….

Thread Starter dyrobin
(@dyrobin)

9 years, 10 months ago

Hi,

Maybe the “stacked” word makes you confusing. So, I put three pictures here to make it clear and I think you should understand what the feature I request.

original nav menu
your plugin does
my suggestion feature

Anyway, you are the author and have the right to evaluate this feature. I am totally OK with current version and sure I can do some changes by myself 🙂

Regards,

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Make the sticky element full width’ is closed to new replies.

Tags