senff/sticky-anything

Simple jQuery plugin to make anything stick at the top of the page when scrolled

sticky-anything's Issues

Bootstrap

Having an issue with bootstrap.

When using the button navigation the menu doesn't scroll with the page - the button does but the list items don't.

Any ideas?

JS is not working on cloned menu

delete….

minscreenwidth in em?

is it possible to define minscreenwidth in em and not in pixels?

thank you

Distance from pushup element

Not really a bug per se but a desired featured.

Right now I'm using the sticky element on the sidebar and it stops (gets "pushed up") when reaches the footer. But it gets glued to the footer.

It would be nice to be able to define an offset margin from the pushup element so it would stop "25px" before it.

Events when sticky is active

Hi! Nice plugin, works like a charme.
Are there any plans to add events when "sticky" condition is reached? I want to make an element visible as soon as "sticky" is active.

Recalculate width on window resize?

When a stick element is visible, and the window is resized, the inline CSS width is not recalculated, leading to stuff off screen or too small.

Would it be possible to recalculate width/position on screen resize?

Thanks!

Add option to display hidden element after scroll X pixels

It would be awesome if there was a way to display a hidden element after X pixels scrolled down. Then it would disappear again when scrolling back up beyond that point.

The Mystery of the Expanding Menu Box

This is a great piece of code, but I have noticed something strange. When I use the .min.js everything works as expected, however when I use the .js file included on this repo, the menu element I want to sticky (it does not take up the whole width) widens continually, even past the page width. I am not sure if this is a problem on my end or with the plugin, but I figured since it works fine with the .min maybe the most recent update created this bug? Thanks again for this amazing plugin!

Compatibility with Animate.css

The menu in my page is nested inside a div which has the classes "animated slideInDown" from Animate.css.

The only way I could get Sticky Anything to work with it was by removing these classes from my parent div.

Is there any workaround to this?

I'd like to keep the animations and also have the menu be sticky.

Original menu within a 960px wrapper

Hi @senff

Thanks for creating this great plugin. I'm a newbie with jQuery and it's such a relief to be able to do this within minutes using your plugin.

I have a question to ask if you don't mind. If my menu wrapper is within a 960px wrapper, can the cloned menu wrapper be at 100% width?

Or should I place the menu on it's own out of the website wrapper?

Thanks!

Partial functionality on mobile device

Hi !
Really nice plugin, works great & very quick/easy to use !
But I have a small problem, on mobile device (iphone iOS 7 on safari & chrome), when scrolled the sticky element goes out of the viewport and only takes its place back when scrolling stops. Is there a way to fix this ?

Thanks !

Repeating Issue

Hello,

I'm having some issues with the sticky header and was wondering if you could assist, it maybe very simple when I scroll down the manu slides up when I scroll down to reveal a copy of itsself and as you scroll down its scrolls up its confusing.

this is what i'm working from.

<script type="text/javascript">
    // Create a clone of the menu, right next to original.
        $('.custom_menu').addClass('original').clone().insertAfter('.custom_menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

        scrollIntervalID = setInterval(stickIt, 700);


        function stickIt() {

          var orgElementPos = $('.original').offset();
          orgElementTop = orgElementPos.top;               

          if ($(window).scrollTop() >= (orgElementTop)) {
            // scrolled past the original position; now only show the cloned, sticky element.

            // Cloned element should always have same left position and width as original element.     
            orgElement = $('.original');
            coordsOrgElement = orgElement.offset();
            leftOrgElement = coordsOrgElement.left;  
            widthOrgElement = orgElement.css('width');
            $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
            $('.original').css('visibility','hidden');
          } else {
            // not scrolled past the menu; only show the original menu.
            $('.cloned').hide();
            $('.original').css('visibility','visible');
          }
        }

</script>