javascript - jQuery Plugin Callback $this can't return element -

i learning write mini jquery plugin tools.

my plugin helping user check if user mousewheel whether scroll or scroll down trigger callback function.

i have 4 divs, when mouse pointer hover , scroll mouse wheel, plugin callback change div 's background color.

unfortunately, callback 's $this not working point element. need help.

style

    body {background: #2a2b30;}     .wrapper {margin-top: 100px;}     .wrapper div.content {border-radius: 7px; border: 1px solid #000; min-height: 300px; margin-top: 30px; background: #ededed; padding: 30px; font-size: 20px;} 

html

    <div class="container">     <div class="wrapper clearfix">         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">             <div class="blk content"> </div>         </div>         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">             <div class=" content"> </div>         </div>         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">             <div class="blk content"> </div>         </div>         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">             <div class=" content"> </div>         </div>     </div> </div> 

call plugin

$(function() {     $('.blk').scroll({         lastanimation   : 0,         quietperiod     : 500,         animationtime   : 800,         scrollup : function() {             $(this).css('background', 'red');         },         scrolldown : function() {             alert('scroll down');         }     }); }); 

my plugin

(function($) { $.fn.scroll = function( options ) {      var settings = $.extend({         // selector         : $(this),         lastanimation    : null,         quietperiod      : null,         animationtime    : null,         scrollup         : null,         scrolldown       : null     }, options);      return this.each( function() {         var lastanimation = settings.lastanimation;         var quietperiod = settings.quietperiod;         var animationtime = settings.animationtime;          function init(event, delta) {             deltaofinterest = delta;             var timenow = new date().gettime();             if( timenow - lastanimation < quietperiod + animationtime ) {                 event.preventdefault();                 return;             }              if ( deltaofinterest < 0 ) {                 // call                 if ( $.isfunction( settings.scrollup ) ) {                     settings.scrollup.call(this);                 }             } else {                 // call                 if ( $.isfunction( settings.scrolldown ) ) {                     settings.scrolldown.call(this);                 }             }              lastanimation = timenow;         }          $(this).bind('mousewheel dommousescroll', function(event) {             event.preventdefault();             var delta = event.originalevent.wheeldelta || -event.originalevent.detail;             init(event, delta);         });         });        }       }(jquery)); 

this because settings.scrollup.call(this); here this not refer div inside function this becomes else inside of init inner function try this:-

  return this.each( function() {      var $this=this; // create variable here        .....       .....      settings.scrollup.call($this); //use here  in init function 

demo