senff / sticky-anything Goto Github PK
View Code? Open in Web Editor NEWSimple jQuery plugin to make anything stick at the top of the page when scrolled
License: GNU General Public License v2.0
Simple jQuery plugin to make anything stick at the top of the page when scrolled
License: GNU General Public License v2.0
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?
delete….
is it possible to define minscreenwidth in em and not in pixels?
thank you
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.
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.
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!
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.
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!
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.
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!
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 !
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.