sticky-kit icon indicating copy to clipboard operation
sticky-kit copied to clipboard

Issue with resizing (using bootstrap)

Open joevayalil opened this issue 8 years ago • 2 comments

I have an issue with making the sticky work for a responsive page. I have 2 divs, one for showing content and a sidebar div for showing archive. And I am calling stick_in_parent on both the columns. While resizing the page (you can notice it clearly if you have the scroll bar scrolled to the bottom and then re-size), it might work in one width, but if you just change one pixel to left or right, it will mess up everything (if the scroll bar is not scrolled to the bottom already, then start scrolling) - you can see that the right side div (.archive) suddenly jumps to the left and overlaps the main content (left side div). Then if you resize again, just move another pixel to left or right, then it will work fine again and again resizing by 1 px messes it up.

Here's the jsfiddle: https://jsfiddle.net/jvj/jrwtf6k4/5/

joevayalil avatar Jun 20 '16 17:06 joevayalil

I have same problem, in paren container of bootstrap I have two div's with col-xs-6 or 5/7 it doesn't mater, one of this div's id sticked in parent by your script... If page width is odd^ everything is OK, if width is an even, sticked div staying under other div and scroll not moving below the parent container.

artfilatov avatar Sep 16 '16 07:09 artfilatov

I had the same problem while I was trying to use bootstrap columns with making my div to be a sticky column on right, when I set spacer value to false , my div would jump to left during stick, so I mixed many things together and I could solve my problem , here is what worked for me , I hope it helps you

first of all ,I used bootstrap classes for my content div as usual , but for sticky column , I only used responsive classes (sm and xs), and for lg and md, I added this css to my page : @media (min-width:728px) { .sidebar-right { /*background: #3498db;*/ width: 25%; float: right; /*padding: 1em;*/ margin: 0em 0 1em; /*box-shadow: 2px 0 16px rgba(0,0,0,0.1);*/ } } but when I was scrolling down , my div would disappear, so based on #180 (comment) I changed my initializer : $("#sidebar").stick_in_parent().on('sticky_kit:bottom', function (e) { $(this).parent().css('position', 'static'); }) .on('sticky_kit:unbottom', function (e) { $(this).parent().css('position', 'relative'); }) all is done and it worked for me , also I used this code as inspiration for my code

Arya-Aghaei avatar Jul 24 '17 13:07 Arya-Aghaei