davist11 / jquery-stickem Goto Github PK

Hey !

First, thank you, for this great tool, it is really enjoyable. I am coding a website where i am trying to use it in a div is scrollable, while the body element is not and has to stay like that. I noticed that in that condition the plug in does not work while it's perfectly working if the body is set on overflow: auto or scroll. Is there any way that could make it works in those conditions too ?

Thank you !

Title says it all really. I'm using it here: http://69.195.124.217/~freedqi4/health/when-in-doubt-reach-out/

We have a case where we need to use off-canvas for a mobile menu system, so to keep the page from jumping back to the top when the off-canvas menu triggers, we wrap the page in an inner-container. The inner-container div has the y-scrollbar.

We can get sticky to grab to the top of this container with no issue, but when the sticky catches the top of the container, as intended, it sizes the bar so it's overlapping the top of the scrollbar. We've tried everything we can think to fix this, but nothing seems to work.

Any suggestions?

I noticed that the JavaScript file doesn't have a license header. This seems to be a common practice amongst JavaScript libraries.
Would it be possible to add the information to the file so users can easily adhere to the project's license?
Something like:
Licensed under the MIT License
Thanks.

Would be nice to have the option to stick at the top, top+bottom, and bottom.

This way, for example, if top+bottom is set, the element would always be on the screen, sticking to the top or bottom of the window whenever needed.

top would be the current behaviour, and bottom would be what the current behaviour would look like if you turned the monitor upside down.

I want to use sticky inside bootstrap tabs.But the sticky is working only in the first active tab. please guide me how to use stickem inside bootstrap tabs.

If the browser height is smaller than the element height when the plugin is initialized, but then is resized to be larger in height than the element, the element never becomes sticky.

It seems this is caused by the if clause surrounding the binding of the resize and scroll events:

if(_self.items.length > 0) {
    _self.$win.on('scroll.stickem', $.proxy(_self.handleScroll, _self));

    _self.$win.on('resize.stickem', $.proxy(_self.handleResize, _self));
}

The length of items will be zero when the bindEvents method is called if the window height is smaller than the element height. Since the resize handler is never added, the plugin will not know when the window height is no longer smaller than the element height.

Initial top offset of target element is not respected after plugin reinitialization

Not sticking.

Currently trying to get the onStick callback to work, but this doesn't seem to work:

$("#main_container").stickem({
onStick: function(){ alert("STUCK"); }
});

What am I doing wrong?

Hi there,

First of all, great stuff. One of the cleanest solutions I have seen for this 👍

I was wondering, would it be possible to change the offset based on the media query? We change the height of our fixed header based on screen size, would be great if we could adapt the offset in Stickem at those points as well.

Thanks!

Hey I am new to this jQuery/Javascript world so forgive me if this is a simple fix.

How do I flip the side in which content under .stickem is stuck.

So for example I have one .stickem-container that has the content scrolling on the left and .stickem content stays on the right. The next section of content is flipped. So .stickem-container content is scrolling on the right side while .stickem content is stuck on the left.

Which function should i use to make it work with infinite scroll...
On first page they are working very much properly
but when infinite scroll fetches a new set of post (thru ajax)
it doesn't works
which javascript should i callback when the content is loaded through ajax

I am passing offset: 100 into the stickem function but it doesn't seem to have any effect on when the stickit class is added. I am trying to satisfy the use case of having a fixed nav at the top of the page. Anybody else run into this?

Hi there, I seached high and low for stickem and it's exactly what I'm after! However, when I add a google font to the page and start scrolling to the bottom of my container it triggers stickit-end about 100px before it should, depending on the amount of content. Just wondering if anyone else has had this problem and has a solution?

If you resize the browser window then this fixes the issue.

Hello, I'm working on a page with dynamic items, the user has the option to remove/filter some items, I'm calling destroy and initialize after postback but if the page is scrolled for example in the middle, the stickem would still work but the sticky item is a bit messed up. How do I initialize it again even if the page scrollTop is not zero? Thanks

I'm not sure why, but on refresh the .stickem element will either scroll up or down past the container. When the page is resized (either with a developer tools window or just by dragging a corner) the .stickem element jumps to its correct position. I've included a link in case this doesn't make sense.

http://client.analog.la/ret5/artists/tomorrow-we-move-to-hawaii/

If you get a piece of content to stick and then resize the window smaller than that content, it looks like it gets caught being sticky forever.

Could you change the version in the component.json to 1.4.0 and git tag the releases to fix bower compatibility. See issue #144 for more information. Thanks!

In case the 'container' height can vary, there is a little fix required in handleScroll function.

            for(var i = 0, len = _self.items.length; i < len; i++) {
                var item = _self.items[i];

                if(item.$container.height()!=item.containerInnerHeight) {
                    item.scrollFinish = item.containerStart - _self.config.start + (item.$container.height() - item.elemHeight);
                }

This is useful if you change the page content using AJAX for example.

Hi,

thank you for this nice plugin!

my question is: is there a way to trigger the handleScroll event?
I have an dynamic website which has variations in height. p.e:
stickem-container is on bottom. on the right there are two radio-boxes "yes" and "no".
if "yes" is selected another div with content below these radio-elements is visible. the sticken-container is scrolling to the bottom and stops correctly. unfortunately if i click on "no" again (the div container disappears) the sticken-container flows into the footer div.
if i could shoot an event, so the sticker-container could reposition?

thank you

As per the title. Element flickers when it goes past the top. This is a common problem for many other scripts too.

I have a client that needs me to fix this plugin so that when the page's height changes(images load long after the plugin loads and makes the page longer), the container stays stuck. This is what I have now, but it didn't work:

Can anyone provide some assistance on this? I'll even send you $10 through paypal after I get paid for this job.

Thanks,
Malachi

Hi,

how can I change when the items should start to be sticky?

in your code, is here:

Stickem.prototype = {
		defaults: {
			item: '.stickem',
			container: '.stickem-container',
			stickClass: 'stickit',
			endStickClass: 'stickit-end',
			offset: 0,
			start: 0,
			onStick: null,
			onUnstick: null
		},

but I need to set a different start for different items.

Thanks

Hi,

2 questions:

1- I added the folder directly into my server root, is it ok? Or I should add the files into a specific folder?
2- I added the jquery code lines $('.container').stickem(); in the <body> of the page, just before than <div> I like to enable the stickem. Is it ok?

Thanks

First, love the stickem. Thank you.

Yes.... I need to support IE7 and for me the stickem isn't working.... so either I did something along the way to cause it to break, or you aren't supporting IE7

This is the work around I created and I am wondering if there are any issues with addressing IE7 in this manner.... OR if you have a better suggestion! At the moment I don't have code to post but I'll try to put up a working example at some point.

.ie7 .stickit{position:fixed !important; margin:0 !important; background:red; top:0 }

Background:red is just what I used to show when .stickit is applied and to help me figure out where it was on the page. IE7 doesn't seem to like the margin setting.

Thanks so much,
Lydia

Hi !
Thanks for your wonderful script !
I have a question regarding the way too implement the js files.

In the page where i have add stickem, before in the code, i have this line, regarding another script :
(even if i write only that, nothing else, even the mode_relocate script)

$(window).on("load resize scroll",function(e){
 mode_relocate();
 }); 

If this is line is here, your plug in doesnt work. If i just write the following line, its ok.

$(window).on("load resize scroll",function(e){

}); 

Do you have any idea ?
Thanks,
Damien

Thanks for making this plugin. It has been great so far. Wondering your thoughts on this.

I'm using masonry.js with Stickem. The text in the titles that are sticking disappear when the next container title gets the class "stickit". See this fiddle for an example... http://jsfiddle.net/sjpLv3of/6/

When I'm not using masonry.js it works as expected. Any ideas?

Hello,
I don't think this repo is still active (unfortunately... this is a really good plugin), but maybe this could help someone stucked like me :

`handleResize: function() {
var _self = this;

		_self.getItems();
		_self.setWindowHeight();

}`

Since getItems needs to know the updated window height to decide between make the elements sticky or not, I think that setWindowHeight should be called before.
So both calls should be reversed, like in the init method, to avoid having sticky elements when the window is to small.

When the stickem element has the css attribute "overflow-y: auto", then tags within an iframe break the stickyness of the stickem element. Only the element is sticky.

The bug is reproduced on jsfiddle:
http://jsfiddle.net/AuAVc/

The bug appears in Chrome for Mac OS X, and I've tested with these versions:
Version 23.0.1271.101
Version 26.0.1366.0 canary

Would this be a bug in Chrome for OS X or jquery-Stickem?

Hi Trevor. I'd love to use this plugin but I can't use unlicensed code. Could you add something like the MIT license? Thanks!

Do you have any plans for this?

Thanks for your plugin. I can't get to the bottom of a bug. I have your plugin working correctly in a custom Wordpress theme but when I'm logged in the 'stickit' class is added before the window scrolls to the container. I thought about using the offset value because of the fixed menu that is added by Wordpress but the class is added when the container scrolls passed the middle of the browser window - a dimension much larger than the fixed menu. When I try to inspect the element the problem fixes itself.

Any ideas on how to get to the bottom of this? Unfortunately I can't paste any public links. Thanks!

If you scroll completely past a block (putting the sticky content at the bottom of that block and out of view), then resize the window and scroll back up, the sticky content stays stuck at the bottom.

Hi.

Using the newest version of Chrome + jQuery - i can't seem to fire Stickem, unless i resize the window manually.

The way i've setup is like what is instructed on your page.

$(document).ready(function() {
medialist.init();
});

--> which calls this class

var medialist = {
init : function() {
$('.container').stickem({
container: '.container',
offset: 72
});
}
};

On the other hand - when i've resized the window manually it seems to be working just fine. So it might be some binding releated issue or so?

Thanks fior the great plugin - it's seriously without doubt the best sticky plugin out there.

• Simon from Denmark

I have 2 sections in the content, the second on is display none onload. A button will trigger the second section to change to display block (just hide and show jquery function). The aside sticky wont stick when the second section is in display block (show) state. I think its height calculation issue. How can I solve this one?

Thank you

I have some random malfunction,sometimes it work sometimes not,i tryied using preload jquery and destroying the sticky when doen but that doesn't work.
url when i'm trying it is http://noticiasmcweb.net/nuevo/

Hi,

I need sticky functionality , but within fixed size parent div with scroll ,
You can reproduce this by
adding following style to your 'container' div in your demo code.
http://davist11.github.io/jQuery-Stickem/

class="container" style="
height: 500px;
overflow: scroll;

And then sticky functionality is not working , is it possible ?
Thanks

i'd like to use the sticky element as a sidebar on my blog, but since the container doesn't have a specific height in the css (because that depends on the posts' lenght) the stickyness doesn't work. how can i fix this? thanks!

When I place images within the content div, the stickem div does not work. Sometimes the stickem div does not stick to the top, other times it jumps to the bottom and a few times it disappears completely when I scroll past the image.

Any recommendations are greatly appreciated.

I am using the latest build on GitHub, and did not adjust any of the code.

See attached screenshot.

it not happens all the time .
in my page i have 10 stickem items .
it happens in FF and chrome
when scrolling the items drops to bottom of container at once
and not following the scroll
(sorry for my terrible english )

First: awesome work man.

Second: i'm using it on a sticky sidebar, if height is defined in pixels or not defined at all, works like charm. If viewport units are used, the plugin doesn't init. I've looked at your code, (although my js skills aren't that great) and can't spot anything wrong since elemHeight: $this.height() should get the value even if defined in vh. No error is thrown to the console either.

Any thoughts?

Edit: retested and works if height < 90vh, which is kinda of weird and this is an aprox value

See for yourself: http://codepen.io/ohsimtabem/pen/MYzEKN

I get the following error when trying to implement this script.

Do you know what might cause this error?

Timestamp: 13/11/18 3:19:43 PM
Error: TypeError: item.$container.offset(...) is undefined
Source File: [path removed]/jquery.stickem.js
Line: 91