ReferenceError:未定义updateSliderMargin

Question

我觉得这应该是一个简单的修复方法，但我很难让这个错误不再发生

​

function headerShrink() {
    $(document).on("scroll", function() {
      if ($(document).scrollTop() > 100) {
         $("header").addClass("shrink");
         updateSliderMargin();
      } else {
         $("header").removeClass("shrink");
         updateSliderMargin();
      }
    });
  }
  headerShrink();

body {
  background: #eee;
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro", sans-serif;
  color: #333;
}

header {
  width: 100%;
  padding: 60px 0;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  /* animation magic */
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: fixed;
}

header h1 {
  font-size: 30px;
  text-indent: 40px;
  font-weight: bold;
}

.container {
  width: 40%;
  margin: 180px auto;
}

.shrink {
  padding: 20px 0;
}

p {
  margin: 0 0 40px 0;
  line-height: 24px;
}

strong {
  font-weight: bold;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<header>
  <h1>baopals</h1>
</header>
  
<section class="container">
<p>
Sed nulla cred Banksy jean shorts. Reprehenderit mumblecore incididunt anim accusamus. Keffiyeh Cosby sweater in cornhole elit, tote bag cillum banjo. Shabby chic YOLO banh mi sunt. Artisan blog Neutra, polaroid adipisicing Banksy +1 lo-fi umami distillery fixie seitan. Semiotics artisan flannel mollit craft beer Blue Bottle. Bespoke biodiesel banh mi literally.
</p>

<p>
YOLO Marfa drinking vinegar polaroid laborum veniam, est disrupt umami wayfarers try-hard before they sold out fap. Culpa bitters kitsch adipisicing, nesciunt brunch squid minim post-ironic assumenda irony. Qui bespoke organic, photo booth authentic PBR velit before they sold out fingerstache nostrud flannel. Leggings chillwave est sustainable, tofu raw denim sint 8-bit keffiyeh High Life. Nostrud Austin put a bird on it, typewriter Godard gastropub ennui mlkshk deserunt assumenda. Blog letterpress meggings, nihil Shoreditch Etsy try-hard vinyl Echo Park cray farm-to-table McSweeney's High Life. Qui stumptown ex Cosby sweater street art ethnic irure dolore.
</p>

<p>
In post-ironic umami, sint +1 gluten-free pickled disrupt vinyl jean shorts velit placeat est American Apparel. Flannel cupidatat deserunt master cleanse cornhole vinyl, Banksy 8-bit fugiat pariatur. Schlitz Intelligentsia incididunt ugh, literally minim skateboard ennui. Labore deep v placeat, mlkshk biodiesel church-key post-ironic Cosby sweater twee nesciunt Blue Bottle. Salvia vero esse, exercitation cliche chambray aliquip gluten-free yr post-ironic pug narwhal kale chips ennui hella. Consequat bitters salvia delectus esse. Fap kogi forage culpa Tumblr, accusamus PBR Thundercats PBR&B banjo ullamco 8-bit bitters minim you probably haven't heard of them.
</p> 
  
<p>
Sed nulla cred Banksy jean shorts. Reprehenderit mumblecore incididunt anim accusamus. Keffiyeh Cosby sweater in cornhole elit, tote bag cillum banjo. Shabby chic YOLO banh mi sunt. Artisan blog Neutra, polaroid adipisicing Banksy +1 lo-fi umami distillery fixie seitan. Semiotics artisan flannel mollit craft beer Blue Bottle. Bespoke biodiesel banh mi literally.
</p>

<p>
YOLO Marfa drinking vinegar polaroid laborum veniam, est disrupt umami wayfarers try-hard before they sold out fap. Culpa bitters kitsch adipisicing, nesciunt brunch squid minim post-ironic assumenda irony. Qui bespoke organic, photo booth authentic PBR velit before they sold out fingerstache nostrud flannel. Leggings chillwave est sustainable, tofu raw denim sint 8-bit keffiyeh High Life. Nostrud Austin put a bird on it, typewriter Godard gastropub ennui mlkshk deserunt assumenda. Blog letterpress meggings, nihil Shoreditch Etsy try-hard vinyl Echo Park cray farm-to-table McSweeney's High Life. Qui stumptown ex Cosby sweater street art ethnic irure dolore.
</p>

<p>
In post-ironic umami, sint +1 gluten-free pickled disrupt vinyl jean shorts velit placeat est American Apparel. Flannel cupidatat deserunt master cleanse cornhole vinyl, Banksy 8-bit fugiat pariatur. Schlitz Intelligentsia incididunt ugh, literally minim skateboard ennui. Labore deep v placeat, mlkshk biodiesel church-key post-ironic Cosby sweater twee nesciunt Blue Bottle. Salvia vero esse, exercitation cliche chambray aliquip gluten-free yr post-ironic pug narwhal kale chips ennui hella. Consequat bitters salvia delectus esse. Fap kogi forage culpa Tumblr, accusamus PBR Thundercats PBR&B banjo ullamco 8-bit bitters minim you probably haven't heard of them.
</p>
  <p>
YOLO Marfa drinking vinegar polaroid laborum veniam, est disrupt umami wayfarers try-hard before they sold out fap. Culpa bitters kitsch adipisicing, nesciunt brunch squid minim post-ironic assumenda irony. Qui bespoke organic, photo booth authentic PBR velit before they sold out fingerstache nostrud flannel. Leggings chillwave est sustainable, tofu raw denim sint 8-bit keffiyeh High Life. Nostrud Austin put a bird on it, typewriter Godard gastropub ennui mlkshk deserunt assumenda. Blog letterpress meggings, nihil Shoreditch Etsy try-hard vinyl Echo Park cray farm-to-table McSweeney's High Life. Qui stumptown ex Cosby sweater street art ethnic irure dolore.
</p>

<p>
In post-ironic umami, sint +1 gluten-free pickled disrupt vinyl jean shorts velit placeat est American Apparel. Flannel cupidatat deserunt master cleanse cornhole vinyl, Banksy 8-bit fugiat pariatur. Schlitz Intelligentsia incididunt ugh, literally minim skateboard ennui. Labore deep v placeat, mlkshk biodiesel church-key post-ironic Cosby sweater twee nesciunt Blue Bottle. Salvia vero esse, exercitation cliche chambray aliquip gluten-free yr post-ironic pug narwhal kale chips ennui hella. Consequat bitters salvia delectus esse. Fap kogi forage culpa Tumblr, accusamus PBR Thundercats PBR&B banjo ullamco 8-bit bitters minim you probably haven't heard of them.
</p>
</section>

​

下面是有问题的代码

  function headerShrink() {
    $(document).on("scroll", function() {
      if ($(document).scrollTop() > 100) {
         $("header").addClass("shrink");
         updateSliderMargin();
      } else {
         $("header").removeClass("shrink");
         updateSliderMargin();
      }
    });
  }
  headerShrink();

它所做的就是将shrink类应用到我的scroll上的头代码中，它工作得很好。但是，当我查看控制台时，每次调用滚动条时都会出现错误ReferenceError: updateSliderMargin is not defined。

是什么导致了这种情况的发生？

Answer 1

当您调用on时，函数的context会发生变化。在on函数的上下文中，没有定义的名为updateSliderMargin的函数。要解决此问题，请将外部上下文bind到函数：

headerShrink() {
  $(document).on("scroll", function() {
    if ($(document).scrollTop() > 100) {
       $("header").addClass("shrink");
       updateSliderMargin();
    } else {
       $("header").removeClass("shrink");
       updateSliderMargin();
    }
  }.bind(this));
}
headerShrink();