淡入的div一個div

Question

裏面那是我的腳本：

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(); 

有了這一個，我能夠淡入一個「菜單」 -div，當我<>體<內向下滾動>。現在我想通過滾動「包裝器」-div來獲得相同的效果。目前，當我在「包裝」-div內向下滾動時，「菜單」-div不會淡入，因爲我不滾動<>正文<>。

所以，我的問題：是否有一個簡單的方法來對<旁邊添加>體<>也-scroll的「包裝」 -div滾動，以淡入相同的「菜單」 -div這個腳本？

多數民衆贊成在classie.js：

/*! 
* classie v1.0.1 
* class helper functions 
* from 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 from bonzo https://github.com/ded/bonzo 

function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

// classList support for class management 
// altho to be fair, the api sucks because it won't accept multiple classes at 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); 

Answer 1

$(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"); 
      } 
     } 
    }); 
}); 

這裏是一個沒有Classie版本：

$(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"); 
      } 
     } 
    }); 
});