Jquery Scroll to Fixed positioning when scroll down

Question

I have one question about my scroll to fixed jquery plugin.

I created this DEMO from codepen.io

You can see in this demo when you scroll down then avatar image fixed but if you scroll up the problem is on there the .text div position. How can i fixed it anyone can help me ?

Answer 1

In the attached jQuery there is a method "setFixed()" which sets the position as position = 'fixed'; change it to position = 'relative'

function setFixed() {
        // Only fix the target element and the spacer if we need to.
        if (!isFixed()) {
            // Set the spacer to fill the height and width of the target
            // element, then display it.
            spacer.css({
                'display' : target.css('display'),
                'width' : target.outerWidth(true),
                'height' : target.outerHeight(true),
                'float' : target.css('float')
            });

            // Set the target element to fixed and set its width so it does
            // not fill the rest of the page horizontally. Also, set its top
            // to the margin top specified in the options.

            cssOptions={
                'z-index' : base.options.zIndex,
                'position' : 'relative',
                'top' : base.options.bottom == -1?getMarginTop():'',
                'bottom' : base.options.bottom == -1?'':base.options.bottom,
                'margin-left' : '0px'
            }
            if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };

            target.css(cssOptions);

            target.addClass(base.options.baseClassName);

            if (base.options.className) {
                target.addClass(base.options.className);
            }

            position = 'fixed';
        }
    }

function setFixed() {
        // Only fix the target element and the spacer if we need to.
        if (!isFixed()) {
            // Set the spacer to fill the height and width of the target
            // element, then display it.
            spacer.css({
                'display' : target.css('display'),
                'width' : target.outerWidth(true),
                'height' : target.outerHeight(true),
                'float' : target.css('float')
            });

            // Set the target element to fixed and set its width so it does
            // not fill the rest of the page horizontally. Also, set its top
            // to the margin top specified in the options.

            cssOptions={
                'z-index' : base.options.zIndex,
                'position' : 'relative',
                'top' : base.options.bottom == -1?getMarginTop():'',
                'bottom' : base.options.bottom == -1?'':base.options.bottom,
                'margin-left' : '0px'
            }
            if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };

            target.css(cssOptions);

            target.addClass(base.options.baseClassName);

            if (base.options.className) {
                target.addClass(base.options.className);
            }

            position = 'relative';
        }
    }