Fixed on top sidebar prevent bottom hover

Question

I've fixed the position of my sidebar when the scroll arrive to a certain point from top. But I've a problem when I arrive to the bottom of the page, the sidebar is on the footer (https://i.stack.imgur.com/ZwjDK.jpg). I need to fixed the sidebar from X to Y and when I arrive to Y she continue to scroll with the rest of the page, but I've no idea how I can do that.

I tried something like that, but it doesn't work :/

    $(function() {
    var NosSortiesTop = $('#NosSorties').offset().top - 50;
    var StickyNosSorties = function(){
        var ScrollTop = $(window).scrollTop();
        var NosSortiesWidth = $('#NosSorties').width();
        var NosSortiesPadding = (NosSortiesWidth / 100) * 4.4;
        if (ScrollTop > NosSortiesTop) { 
            $('#NosSorties').css({ 'position': 'fixed', 'top':50 });
        } else {
            $('#NosSorties').css({ 'position': 'relative', 'top':'inherit', 'width': NosSortiesWidth, 'padding-left': NosSortiesPadding, 'padding-right': NosSortiesPadding }); 
        }   
    };

    StickyNosSorties();
    $(window).scroll(function() {
         StickyNosSorties();
    });

});

Someone have an idea how I can fix that ?

A JSFiddle or demo site would be very helpful in this case because the question is a bit difficult to understand. — DevlshOne, Sep 13 '14 at 09:40

score 0 · Answer 1 · answered Sep 13 '14 at 09:49

JQuery followTo

var objWindow = this;
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(objWindow);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 'auto'
            });
        }
    });
};

Fixed on top sidebar prevent bottom hover

1 Answers1

$.fn.followTo