javascript - FadeIn div on scroll inside a div -

thats script:

function init() {     window.addeventlistener('scroll', function(e){         var distancey = window.pageyoffset || document.documentelement.scrolltop,             shrinkon = 70,             header = document.queryselector("header");         if (distancey > shrinkon) {             classie.add(header,"smaller");         } else {             if (classie.has(header,"smaller")) {                 classie.remove(header,"smaller");             }         }     }); } window.onload = init(); 

with one, able fadein "menu"-div, when scroll down inside <>body<>. want same scrolling inside "wrapper"-div. @ moment "menu"-div doesn´t fadein when scroll down inside "wrapper"-div, because dont scroll <>body<>.

so, question: there simple way add beside <>body<>-scroll "wrapper"-div scroll, fadein same "menu"-div @ script?

thats classie.js:

/*!  * classie v1.0.1  * class helper functions  * bonzo https://github.com/ded/bonzo  * mit license  *   * classie.has( elem, 'my-class' ) -> true/false  * classie.add( elem, 'my-new-class' )  * classie.remove( elem, 'my-unwanted-class' )  * classie.toggle( elem, 'my-class' )  */  /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false, module: false */  ( function( window ) {  'use strict';  // class helper functions bonzo https://github.com/ded/bonzo  function classreg( classname ) {   return new regexp("(^|\\s+)" + classname + "(\\s+|$)"); }  // classlist support class management // altho fair, api sucks because won't accept multiple classes @ once var hasclass, addclass, removeclass;  if ( 'classlist' in document.documentelement ) {   hasclass = function( elem, c ) {     return elem.classlist.contains( c );   };   addclass = function( elem, c ) {     elem.classlist.add( c );   };   removeclass = function( elem, c ) {     elem.classlist.remove( c );   }; } else {   hasclass = function( elem, c ) {     return classreg( c ).test( elem.classname );   };   addclass = function( elem, c ) {     if ( !hasclass( elem, c ) ) {       elem.classname = elem.classname + ' ' + c;     }   };   removeclass = function( elem, c ) {     elem.classname = elem.classname.replace( classreg( c ), ' ' );   }; }  function toggleclass( elem, c ) {   var fn = hasclass( elem, c ) ? removeclass : addclass;   fn( elem, c ); }  var classie = {   // full names   hasclass: hasclass,   addclass: addclass,   removeclass: removeclass,   toggleclass: toggleclass,   // short names   has: hasclass,   add: addclass,   remove: removeclass,   toggle: toggleclass };  // transport if ( typeof define === 'function' && define.amd ) {   // amd   define( classie ); } else if ( typeof exports === 'object' ) {   // commonjs   module.exports = classie; } else {   // browser global   window.classie = classie; }  })( window ); 

$(document).ready(function() {    $('#wrapper').scroll(function(e){         var distancey = window.pageyoffset || document.documentelement.scrolltop,             shrinkon = 70,             header = document.queryselector("header");         if (distancey > shrinkon) {             classie.add(header,"smaller");         } else {             if (classie.has(header,"smaller")) {                 classie.remove(header,"smaller");             }         }     }); }); 

here's no-classie version:

$(document).ready(function() {    $('#wrapper').scroll(function(e){         var distancey = window.pageyoffset || document.documentelement.scrolltop,             shrinkon = 70,             header = $("header");         if (distancey > shrinkon) {             header.addclass("smaller");         } else {             if (header.hasclass("smaller")) {                 header.removeclass("smaller");             }         }     }); });