javascript - Fixed div inside scrolling div - Stack Overflow

admin管理员组

文章数量:1180551

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: /

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;*/
    }

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;*/
    }

• javascript
• jquery
• html
• css
• frontend

Share Improve this question Follow edited Apr 15, 2015 at 20:45 pixelistik 7,82033 gold badges3333 silver badges4343 bronze badges asked Oct 7, 2014 at 18:18 user3998237user3998237 10

• So you want to enable scrolling in the inner div only when the scroll starts from this div. Otherwise you still want to main page to scroll. Is that correct? Because I'm a bit confused with what you really want to do – floribon Commented Apr 9, 2015 at 15:02
• Sorry, i dont have a good english, i know haha.. Yes! And when the scrolling is enable, i need the .main to be fixed.. – user3998237 Commented Apr 9, 2015 at 15:04
• I'm racking my brain since yesterday , all I do not worked.. --' – user3998237 Commented Apr 9, 2015 at 15:06
• does this need to be css only or can it use JavaScript? I know your tags say jQuery, etc. but you don't seem to be exploring those solutions... – DrCord Commented Apr 9, 2015 at 15:08
• Js can be used @DrCord – user3998237 Commented Apr 9, 2015 at 15:09

 |  Show 5 more comments

3 Answers 3

Sorted by: Reset to default 26 +150

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";
}

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 :-)

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.

本文标签： javascriptFixed div inside scrolling divStack Overflow