Maintain a fixed position in the background image and center

Question

In my project, I need to show a small image in the center of the visible part of the container with respect to the ie window.loader . Even when the user scrolls the page, the image should be visible in the center .loader.

I successfully implemented this, but now I have come across edgecase, when the user scrolls the page “to the header” or “to the footer”, the small image is hiding. demo .

This is normal behavior, but in these edgecases I want the image to adhere to the top / bottom end of the container .loader.

What I want:

• Keep the small image always in the center of the container .loader. (I already implemented this)
• when scrolling to any end of the container, the.loader image should adhere to this end, and not hide behind the container.

Fiddle

A solution using only css is preferred. I am looking for browser support in IE9 +, chrome and firefox.

.header {
    height: 600px;
    width: 650px;
    background-color: grey;
}
.left-side {
    height: 300px;
    width: 150px;
    float: left;
    background-color: red;
}
.loader {
    background-image: url('http://i.imgur.com/U2njI.jpg');
    margin-left: 150px;
    height: 1500px;
    width: 500px;
    background-position: 345px center;  
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: cornflowerblue;
}
.footer {
    height: 600px;
    width: 650px;
    background-color: silver;
}

<div class="header"></div>
<div class="left-side"></div>
<div class="loader"></div>
<div class="footer"></div>

Run codeHide result

Answer 1

Here is a working solution with javascript, I hope that its behavior is what you expect. Unfortunately, I cannot test it on IE9 right now, but it should work ( DEMO ):

document.addEventListener('DOMContentLoaded',function() {
    var loader = document.querySelector('.loader'),
        loaderRect = loader.getBoundingClientRect(),
        loaderTop = loaderRect.top + document.body.scrollTop,
        loaderBottom = loaderTop + loader.offsetHeight,
        initialBgPos = loader.style.backgroundPosition,
        imageHeight = 141;

    function onScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(loaderTop >= (scrollTop + (window.innerHeight - imageHeight)/2)) {
            loader.style.backgroundPosition='345px ' + (loaderTop - scrollTop) + 'px'; 
        } else if(loaderBottom <= (scrollTop + (window.innerHeight + imageHeight)/2)) {
            loader.style.backgroundPosition='345px ' + (loaderBottom - scrollTop - imageHeight) + 'px'; 
        } else {
           loader.style.backgroundPosition = initialBgPos;
        }
    }

    window.addEventListener('scroll', onScroll);
    onScroll();    
});

Answer 2

, , . .loader div , , , , , div. , CSS ( div):

.loader{
    position: fixed;
    left: 100px;
    top: 300px;
 }

JSFiddle: http://jsfiddle.net/Ezhb4/4/