sticky-kit

sticky-kit copied to clipboard

Tried out your plugin and for most part it is working better than any other of the sticky plugins that I tried, so thanks for the great work on that side. But there is one bug. I have this video-element which should stay sticky and it does, but when I scroll to the very bottom of the page it just disappears like this:

Instead of looking like 'sticking' to the end of the parent div like this (this is using position: sticky in the firefox nightly)

Maybe check for .bottomed style. The sticky element gets a new state when reaching the bottom of the container.

2014-03-05 16:21 GMT+01:00 Markus Padourek [email protected]:

Tried out your plugin and for most part it is working better than any other of the sticky plugins that I tried, so thanks for the great work on that side. But there is one bug. I have this video-element which should stay sticky and it does, but when I scroll to the very bottom of the page it just disappears like this:

[image: capture decran 2014-03-04 a 15 37 01]https://f.cloud.github.com/assets/2580254/2334517/92b736ae-a479-11e3-9421-8a20c2ceb6f4.png

Instead of looking like 'sticking' to the end of the parent div like this (this is using position: sticky in the firefox nightly) [image: capture decran 2014-03-04 a 15 36 53]https://f.cloud.github.com/assets/2580254/2334526/a946085a-a479-11e3-909c-1778d6ce32c7.png

Reply to this email directly or view it on GitHubhttps://github.com/leafo/sticky-kit/issues/31 .

Interesting: If I use

.on('sticky_kit:bottom', function(e) {
    $('#main').css('position', 'fixed');
});

It scrolls through the bottom, which is at least better. But I don't seem to be able to get it to stick at the bottom. Any ideas?

I would not use the fixed property, but rather absolute; bottom:0. If the parent container has a position: relative; it should stick to the bottom, because absolute is relative to the closest parent with a relative position, and fixed will be relative to the viewport.

I'm experiencing this same issue. What appears to be happening is that the sticky element is in fact being set to absolute bottom:0 and the parent is relative BUT the wrapping div doesn't get removed so the sticky element appears to disappear but really it just shoots back up the page, at the bottom of the wrapper. https://www.dropbox.com/s/y05fpimok1tlcge/Screenshot%202014-07-25%2016.08.42.png

Not sure how to fix it. I've tried a number of things, like unwrap() when the bottom event is fired but that created a bunch of issues. Any ideas?

I'm having the same issue. I'm sticking one of two divs within a bootstrap row. One of two things happens, depending on the window size. If the window is smaller, once I get to the end of the container, the element jumps to the top of the page. If the window is bigger, the element will just keep scrolling through the element below. Here are some examples of the effected div when it jumps:

Before Reaching Bottom: <div class="col-md-8 is_stuck" style="margin-left: 30px; position: fixed; top: 0px; width: 780px;" id="contact-div"> </div>

After Reaching Bottom: <div class="col-md-8 is_stuck" style="margin-left: 30px; position: absolute; top: auto; width: 780px; bottom: 0px;" id="contact-form"></div>

I'm having this problem if i am using a parent item which height is adjusted by another javascript. If i run recalc_and_tick after adjusting the height of the parent element, everything works fine.

@courdek I noticed the same thing, and I fixed it by changing the position style of the wrapping div on the bottom & unbottom events. The problem is that the wrapping div is position: relative and so the bottom:0 undesirably refers to the wrapping div instead of the sticky parent.

Here's how I did it:

$('.my-sticky-element')
.on('sticky_kit:bottom', function(e) {
    $(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
    $(this).parent().css('position', 'relative');
})

@leafo is this perhaps something that should be fixed in the main source?

Also to other people having "bottomed" issues, one tip is to call your stick_in_parent() within a $(document).ready() callback. I was using another JS library that caused the height of the sticky element to change, and it was only determined correctly by sticky-kit once I put it in document.ready

@danxshap solution worked for me

The last solution does not work for me, webkit browsers still have problem with disappearing maybe there are a lot of ads and they do some conflicts. But anyway I decide recalculate position based at top not at bottom here is code

contents
    .on('sticky_kit:bottom', function(e) {
        var calculated_top, self;

        self = $(this);

        calculated_top = self.parent().height() - self.outerHeight();
        self.css('top', calculated_top + 'px');
    });

I had the same issue and I use Bootstrap. You can find my code below:

<div class="row main-wrapper">
    <!-- // SIDEBAR -->
    <div class="col-sm-4">
        <div id="pinned">
            <!-- PINNED ELEMENT -->
        </div>
    </div>
    <!-- // PRIMARY CONTENT -->
    <div class="col-sm-8">
    </div>
</div>

<script>
    // JQUERY STICKY KIT
    // http://leafo.net/sticky-kit/
    $("#pinned").stick_in_parent({
        parent: '.main-wrapper',
        offset_top: 30
    });
</script>

I fixed this issue adding position: static; on col-sm-4

Thank you, @danxshap , for that fix! A tip to other users: for styling purposes it is useful to add a class to the 'parent' div into which sticky-kit places the target element.

I personally found I had better control when removing the mother div's inline style attribute altogether, and adding my own css rules. My code (using angular.js and sass) includes:

js:

element.on('sticky_kit:stick', function(e) {
  element.parent().removeAttr('style');
  element.parent().addClass('mother-of-sticky');
})
.on('sticky_kit:bottom', function(e){
  element.parent().addClass('bottomed');
})
.on('sticky_kit:unbottom', function(e){
  element.parent().removeClass('bottomed')
});

scss:

.mother-of-sticky {
    @extend .col-sm-5;
    @extend .no-padding;

    position:relative;

    &.bottomed {
      position: static;
    }

    .is_stuck {
        padding-right:15.5px;  
    }
}

I got it fixed by placing the code in a $(window).load(function(){ ... }); function.

@hh2k That worked for me too.

I've tried all the methods above and tried to understand why it worked incorrectly and I failed, then I did what @hh2k said, and well, it worked -_- So if you're having the same problem, try his method first and if it doesnt help, then try any from the above

None of these suggestions worked for me unfortunately, but I found another way to fix this, based on Globegitter's comment above. I had to set the css 'position', 'top', and 'bottom', as these are set by the plugin as soon as the element is 'stuck'.

Assuming sticky element with an id of 'pinned'. Also, the top:50px is arbitrary, and should be set to offset_top option value. This can be replaced with 0px instead if no space is needed.

$('#pinned').on('sticky_kit:bottom', function(e) {
         $(this).parent().css('position', 'static');
         $(this).css({
            'position': 'fixed',
            'top': '50px',
            'bottom': ""
         });
}).on('sticky_kit:unbottom', function(e) {
         $(this).parent().css('position', 'relative');
})

@danxshap Thanks for your workaround. I am using TB3 with sticky-kit and I've had the same problem. Now everything works fine. :+1: It would be great if this could be fixed.

Thanks @danxshap That was exactly what I needed! It should be in the docs!

hi, does anybody encountered a problem with the sticky kit in safari? it's not working in safari browser. I'm using the sticky kit for my sidebar

this the javascript which I saved as another js file and include it in my main page as well as the other scripts and css needed

(function() { var reset_scroll;

$(document).ready( function() { return $("[data-sticky_column]").stick_in_parent({ parent: "[data-sticky_parent]" }); });

reset_scroll = function() { var scroller; scroller = $("body,html"); scroller.stop(true); if ($(window).scrollTop() !== 0) { scroller.animate({ scrollTop: 0 }, "fast"); } return scroller; };

window.scroll_it = function() { var max; max = $(document).height() - $(window).height(); return reset_scroll().animate({ scrollTop: max }, max * 3).delay(100).animate({ scrollTop: 0 }, max * 3); };

window.scroll_it_wobble = function() { var max, third; max = $(document).height() - $(window).height(); third = Math.floor(max / 3); return reset_scroll().animate({ scrollTop: third * 2 }, max * 3).delay(100).animate({ scrollTop: third }, max * 3).delay(100).animate({ scrollTop: max }, max * 3).delay(100).animate({ scrollTop: 0 }, max * 3); };

$(window).on("resize", (function(_this) { return function(e) { return $(document.body).trigger("sticky_kit:recalc"); }; })(this));

}).call(this);

this is the html, by the way i'm using bootstrap also

-thanks for help, i will be very glad if someone can give me a working file. Thanks

One more thumb up for @danxshap solution!

Yep, thanks @danxshap, worked like a charm :+1:

and another one for @danxshap, works perfectly :+1:

@danxshap is awesome!

@danxshap love your work!

Well... That's a fix ! Thanks @danxshap

Well played, @danxshap :+1: It's working!

@danxshap i have the same issue but only with firefox, do you have an idea what is happen? http://front.delitogo.mx/restaurantes/13

Hi, none of these solutions was properly working for me, i just solved the thing using:

1.Flexbox bootstrap 4 columns(they are 100% height), and sitck element to that parent column, not the parent row of your columns.

var navheight = $('.mimo-navbar-fixed').height(),
                adminbar = $('#wpadminbar').height(),
                footerheight = $('body footer').height(),
                allheight = adminbar + navheight;

                $('.mimo-sticked').each(function(){
                    $(this).stick_in_parent({
                        offset_top: allheight,
                        spacer:false
                    }) 
                });

2.When i make and ajax call to include new elements(infinite scroll) in page, so the parent div gets higher, so the column too(because it is 100% height, i run this code to avoid elements to dissapear to the bottom, because they are bottomed:

//Only affect sticked elements
    $('.mimo-sticked.is_stuck').each(function(){
        var myheight = $(this).height();
        //If this height is smaller than windowheight(previously calculated)
        if(myheight  < windowheight){
                $(this).css({
                'position':'fixed',
                //allheight is my offset, previously calculated
                'top':allheight,
                'bottom':'auto'});
        }
        //If not, continue bottomed because it will not dissapear
    });

Regards to everyone

Here is my solution.

<div class="container">
    <div class="row" data-sticky_parent>
        <div class="col-sm-9 col-sm-push-3" data-sticky_column>

        </div>
        <div id="left_menu" class="col-sm-3 col-sm-pull-9" data-sticky_column>

        </div>
    </div>
</div>

$(function(){
    $("#left_menu").stick_in_parent({inner_scrolling:false,offset_top:70})
        .on('sticky_kit:stick', function(e) {
                $('#left_menu').parent().addClass('col-sm-3 col-sm-pull-9');
                $('#left_menu').removeClass('col-sm-3 col-sm-pull-9');
            }).on('sticky_kit:unstick', function(e) {
                $('#left_menu').addClass('col-sm-3 col-sm-pull-9');
            }).on('sticky_kit:bottom', function(e){ 
                $('#left_menu').parent().removeClass('col-sm-3 col-sm-pull-9');
                $('#left_menu').addClass('col-sm-3 col-sm-pull-9');

                $('#left_menu').parent().css('position', 'static');
            }).on('sticky_kit:unbottom', function(e){
                $('#left_menu').parent().addClass('col-sm-3 col-sm-pull-9');
                $('#left_menu').removeClass('col-sm-3 col-sm-pull-9');

                $('#left_menu').parent().css('position', 'relative');
            });
    if(screen.width <= 768){
        $('#left_menu').trigger("sticky_kit:detach");
    }       
});

I cannot believe this issue still exists :man_facepalming:

Hi,

I am using the following jQuery http://leafo.net/sticky-kit/#reference for sidebar sticky but in my case I want to make the sidebar position as absolute when reaching a custom div instead of footer, how can I achieve this?

My script

(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k)); if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("

"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q, u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h), h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}), a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize", y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);