Untitled

<body>
    <div id="header">
        MY CONTENTS
    </div>
    <div id="main">
        MY OTHER CONTENTS
    </div>
</body>

</div>

html,body {
    height:100%;
}
#header {
    position:absolute;
    width: 100%;
    height: 100px;
    background:#c3c3c3;
    z-index:1;
}
#main {
    background: #eee;
    height:100%;
    border-top:100px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}

#div2 {
  overflow-y: scroll;
}

body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}

<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
    $(document).bind("mousewheel", function(event) {
        event.preventDefault();
    });
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
    if($("#cart").scrollTop() != 0) {
        $(document).unbind("mousewheel");
    } else {
        event.preventDefault();
    }
}});
$("#cart").on("mouseleave", function(event) {
   $(document).unbind("mousewheel");
});
</script>