sticky-kit

sticky-kit copied to clipboard

Guys hello!

At me dynamically at a scroll the header height varies, at a scroll downwards 80px, at a scroll upwards 157px, how it is better to arrive in that case?

I have same issue with you !

I have the same issue. My sites have a sticky menu which will show only when scrolling up.

I don't know if this plugin has option to allow changing offset dynamically so it will add offset only when scrolling up with the value equal with the sticky menu height.

You can try https://github.com/somewebmedia/hc-sticky ^^ !

Thank you KytoSai. Actually, I have no plan to turn to new plugin so if you have any idea for the issue on this plugin, please share. Appreciate any idea. Thanks again.

I ran into a similar requirement. I have a sticky masthead and a sticky filter bar.

$(".masthead").stick_in_parent();
$(".filterbar").stick_in_parent({ offset_top: $(".masthead").height() });

My masthead is one height before it's sticky and then shrinks when it's sticky.

I discovered that you can bypass the offset_top value by changing the top style of the element:

$(".filterbar").stick_in_parent({ offset_top: $(".masthead").height() })
	.on("sticky_kit:stick", function(e) {
		$(e.target).css('top', $(".masthead").height()+'px');
	});

Now, to get that calculation to run more often you can use the recalc_every option. You probably don't want to run it every tick but maybe every 5 would be ok.

I'll leave it to you to figure out how to figure out which direction the user is scrolling :)

if use 2 version header (fixed and normal , we use this javascript

// if have show back top
          var myNav = document.getElementById("navigation");
          if(myNav){
            $(".sticky").stick_in_parent({offset_top: 70});
          } else {
            $(".sticky").stick_in_parent({offset_top: 10});
         };

You can try https://github.com/somewebmedia/hc-sticky ^^ !

This should be the accepted answer for any and all issues in this repository - lol