Fixed div inside scrolling div

Question

I need to make the main of my site that has 980px width and 500px height (class="main") be fixed only when the mouse is over a scrolling div and has a height of 1500px and a width of 100% (class="container-scroll"), that is inside other div with height of 500px. (class="container")

Pretty confused, right?

I made a fiddle, I'm almost there, the problem is that if I set up the main to fixed, it will scroll with the page , not just inside the div

This is my fiddle: https://jsfiddle.net/8oj0sge4/1/embedded/result/

HTML:

<div id="wrapper">
    <div class="container">
        <div class="container-scroll">
            <div class="main">

            </div>
        </div>
    </div>
</div>

CSS:

    #wrapper {
        width: 100%;
        height: 1500px;
        border: 1px solid red;
        padding-top: 380px;
    }
    #wrapper .container {
        border: 1px solid green;
        width: 100%;
        height: 500px;
        overflow: scroll;
    }
    #wrapper .container-scroll {
        height: 1500px;
        width: 100%;
        border: 1px solid yellow;
    }
    #wrapper .main {
        width: 980px;
        height: 500px;
        background: black;
        overflow: scroll;
        /*position: fixed;*/
    }

Answer 1

If I'm understanding this correctly, you want the main div to stay on the top of the parent div?

Fiddle: https://jsfiddle.net/8oj0sge4/3/ (full)

Changes made:

• #wrapper .main: Added position:absolute ("fixed" to parent)
• #wrapper .container-scroll: Added position: relative (determines what parent to "fix" to)
• Added an id to the main div (for convenience)

JavaScript code:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight; // Make sure we don't go outside the parent

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

Answer 2

There is no pure CSS to do that, but you could work around it with some Javascript.

One solution could be to disable scrolling on the inner div if the scrolls has been initiated on the #wrapper, which is demoed on this fiddle:

https://jsfiddle.net/qmjmthbz/

Here is the code:

var wrapper = $('#wrapper');
var container = $('.container');
var timer;

// Listen to mouse scroll events
$('body').on('mousewheel', function(e) {
    var target = $(e.target);
    /* If the scroll is initiated from the #wrapper,
       disable scroll on the container and re-enable it
       100ms after the last scroll event */
    if (target[0] === wrapper[0]) {
        container.addClass('no-scroll');
        clearTimeout(timer);
        timer = setTimeout(function() {
            container.removeClass('no-scroll');
        }, 100);
    }
});

Note: it is useless to use jQuery to achieve that but I am rushing that at a train station. I will provide a better code when I can find more time :-)

Answer 3

Basicly I think you can't make the div scroll because the content of the div does not exceed the height of the div. In order for the div to become scroll-able the content should actually exceed the height of the div.

Try giving the div a height of lets say 100px, and insert an amount of text large enough to exceed the 100px height, thus making the div scrollable, and then try if what you want to achieve works.