scroll page then at certian position scroll element

I am at a bit of a loss for how how to do this.

I have a web page. I want a user to scroll down, then at a specific distance from the top I want the mouse scroll to effect an elements position (making it appear as thought that element is scrolling). then when that element hits a position (ie top: -500) I want the scroll to apply to the main webpage again. Any thoughts on how I can do this?

Im working on a fiddle now but not having any luck, I will post when I have something to show

Edit: The beginning of a solution/sudo code http://ift.tt/1bEDvv9

Attached is an image of one area in which I am applying this.

//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px'); 

var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;

// variable to stop function from being replayed on scroll when scrolling image
var isScrollingImage = false;

// disables scroll on body
var disableScroll = function() {
    document.body.style.overflow='hidden';
}
// enables scroll on body
var enableScroll = function() {
    document.body.style.overflow='auto';
}
//change position of background along y axis with scroll
var scrollImage = function() {
    console.log("called");
   isScrollingImage = true;
   var pageFeature = document.getElementById("inner");
   var pageFeaturePosition;
   pageFeature.style.backgroundPositionY=parseInt(-scrollY / 10) + "px";
    //if (background is scrolled to bottom) {
    //    enableScroll();
    // }
}

//when element gets to center of viewport and animation is scroll is not on element
//call scrollImage()
function checkPosition() {
    if (scrollY > 720 && !isScrollingImage) {
        disableScroll();
        scrollImage();
    }
    //isScrollingImage = false;
}

//once out of view port will have to bring the image back down, 
//scroll image will only happen on the way down

document.addEventListener('scroll', checkPosition);