Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to make a dynamical offset_top? #260

Open
MaximRazon opened this issue Mar 19, 2018 · 7 comments
Open

How to make a dynamical offset_top? #260

MaximRazon opened this issue Mar 19, 2018 · 7 comments

Comments

@MaximRazon
Copy link

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?

@kytosai
Copy link

kytosai commented Apr 5, 2018

I have same issue with you !

@tiennguyenvan
Copy link

tiennguyenvan commented Jul 5, 2018

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.

@kytosai
Copy link

kytosai commented Jul 5, 2018

@tiennguyenvan
Copy link

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.

@mwalsh
Copy link

mwalsh commented Jul 30, 2018

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 :)

@aribudin
Copy link

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});
         };

@steve-vancouver
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants