JQuery: Fix Div including re-sizing window

Question

Hi I'm working on a fixed / pinned Div also after re-sizing the Browser Window. To fix the Div is no problem but I'm not able to auto resize the width with jquery. My current code is:

 <script type="text/javascript">
    $(window).load(function(){
        function fixDiv() {
            var $cache = $('.pin');
            if ($(window).scrollTop() > 100)
                $cache.css({'position': 'fixed', 'top': '10px', width: $('.pin-wrapper').width()});
           else
                $cache.css({'position': 'relative', 'top': 'auto', width: $('.pin-wrapper').width()});
        }
        $(window).scroll(fixDiv);
        fixDiv();
    });
    $(document).ready(function(){
        fixDiv();
    });
    $(window).resize(function(){
        fixDiv();
    });
</script>

The Html looks like this:

<div class="grid-12 parent"> <!-- Kolos 12.02.2014 -->
        <div class="pin-wrapper">
                <div id="header" class="main-menu-container grid-12 hide-mobile pin"></div></div></div>

thanks for any help Cheers, Carol

Answer 1

You are facing scoping issue, fixDiv() method being declared inside onload handler. You could use instead:

function fixDiv() {
    var $cache = $('.pin');
    if ($(window).scrollTop() > 100) $cache.css({
        'position': 'fixed',
        'top': '10px',
        width: $('.pin-wrapper').width()
    });
    else $cache.css({
        'position': 'relative',
        'top': 0,
        'width': $('#header').width()
    });
}
$(window).on('load resize scroll', fixDiv);

But in your posted HTML markup, it appears than there is no element with class header, looks like you are targeting element with ID header. But then, #header is the same element as $cache, quite confusing.