jquery - 滚动到另一个元素时如何使我的元素可见？

Question

我有 #event div，它是我页面上的一个隐藏 div 当我向下滚动我的页面时，如果我靠近我的 #event div 然后是可见的。但是当我向下滚动到我的 #event div 附近然后它变得可见但是有一个小错误，因为当我向下滚动时我的 div 正在摇晃。

那么我的错误在哪里呢？

我看到一个插件 headroom.js 但我不想使用任何我想自己做的插件。我想这是一个基本的。

脚注:我的#event div 位于红色背景的#page div 的中心

  $(document).scroll(function() {
        var a = $(this).scrollTop();
        if (a > $("#event").offset().top + $("#event").height()){
          $("#event").show();
        }else{
          $("#event").hide();
        }
        
    });

#page{
  width:960px;
  margin:30px auto;
  padding:5px;
}
header,footer{
  width:100%;
  height:150px;
  background:lightblue;
  margin-bottom:20px;
}
#content{
  width:100%;
  background:orange;
}
.box{
  margin-bottom:20px;
  padding:10px;
  font:14px/22px sans-serif;
}
#event{
  position:relative;
  width:100%;
  background:red;
  height:300px;
  display:none;
}
#event:before{
  content:"EVENT DIV";
  color:#FFF;
  font:72px tahoma;
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  
}

<div id="page">

  <header></header>
  
   <div id="content">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolorem, libero voluptas expedita quos cum ullam ratione facilis laboriosam ab optio, sapiente enim animi porro! Obcaecati possimus, rerum est fuga, voluptas, pariatur ex quia neque temporibus ipsum quo qui voluptates architecto inventore eveniet libero sed debitis laborum itaque repudiandae magni praesentium placeat! Obcaecati cupiditate ea, nam omnis deleniti quae iure ratione eveniet sequi unde illo delectus odio, vitae, placeat quod nihil sunt pariatur explicabo modi dolores est soluta hic natus? Perspiciatis doloribus deserunt qui! Enim, optio labore totam consequuntur ducimus magni maiores obcaecati alias reiciendis expedita voluptatibus quaerat voluptas pariatur.</div>
      <div class="box">Sint accusantium, voluptatem sunt ea impedit alias nemo? Quia doloremque, officiis sapiente quasi. Voluptas saepe, consequatur. Autem officia, asperiores fugiat quo, velit ipsum eos dicta sunt non assumenda deleniti, obcaecati, incidunt sed nihil totam libero. Fuga porro explicabo obcaecati perferendis assumenda illo non temporibus, asperiores laborum perspiciatis vitae iure ea, quos accusantium facilis earum ipsa dignissimos similique, sapiente rem at quibusdam ratione. Aliquam, nostrum vero praesentium saepe deserunt excepturi non, harum ullam possimus facilis blanditiis exercitationem dignissimos iure cupiditate mollitia perferendis! Vitae itaque expedita molestias ipsa eaque, possimus velit autem temporibus obcaecati sit sunt iure illo labore sed accusamus veritatis.</div>
      <div class="box">Vel eum quaerat ipsam cupiditate. Ab fugit magnam sapiente soluta aperiam illo voluptatem autem numquam tempore asperiores quas neque nemo, modi fugiat at dicta ex aliquid cupiditate pariatur, vero quod voluptatibus eum itaque quo. Sit vitae cumque modi magni, consequuntur nam fugiat ipsam eius repudiandae praesentium tempore id voluptates hic earum, unde natus, corrupti quia ullam, alias error veritatis eaque numquam voluptatem ducimus. Praesentium repellendus assumenda, aperiam fugiat rerum id. Omnis dicta beatae officiis corporis alias quod voluptates maxime quibusdam in, voluptatibus ipsa sapiente, doloribus doloremque harum minima debitis accusamus iste nemo vero voluptate eius? Quas necessitatibus unde odit pariatur!</div>
      <div class="box">Aut iste dolorum quod vitae at asperiores accusamus, doloribus earum quisquam aliquam voluptas aspernatur veniam molestiae temporibus rerum rem corrupti ducimus expedita praesentium minima excepturi reprehenderit, odio a! Tempora sunt eaque necessitatibus delectus possimus deserunt, nulla, adipisci vero id temporibus commodi repudiandae ab eius, earum laborum velit omnis quia ipsa fuga similique, illum corporis placeat error magni! Corporis, culpa reiciendis praesentium ex quo ducimus ipsa obcaecati voluptates architecto reprehenderit, ipsam, aut perferendis ullam fugiat odit? Consequatur ullam illum facere magni quis perferendis explicabo rerum, nihil ipsa. Quod facere soluta, consequuntur modi! Porro minima quis, nesciunt ex at repellendus quisquam libero.</div>
      <div class="box">Accusantium adipisci eius saepe architecto unde. Sunt, natus atque harum amet ea odit excepturi dolorum magni deleniti eos, molestiae magnam velit rerum ex aliquam suscipit perferendis at cupiditate, maxime voluptates ut? Voluptates exercitationem illum delectus nulla similique explicabo temporibus odio voluptatibus veniam voluptatum corporis, aut facilis, ducimus expedita laboriosam culpa error fuga! Modi at est animi architecto voluptates, nulla quisquam praesentium odit distinctio deserunt, ad voluptatibus repellendus quas. Illum et tempore ab, odit sequi perferendis, nostrum, suscipit atque id illo harum quas est itaque culpa consequatur, repellat dolore quibusdam eum ea cum beatae! Deleniti quos rerum aperiam facere repellat provident?</div>
      <div class="box">Explicabo cupiditate, ducimus neque nisi, id error delectus rerum expedita dolore, ad recusandae, quia sed nobis. Eum nostrum, nam exercitationem nobis veritatis. Earum suscipit, iusto molestiae commodi vel error similique eius velit nobis illum fugiat, accusantium repellat asperiores facilis non sequi magnam! Explicabo vel, distinctio tempora libero! Ipsam iusto alias dolores unde ipsum debitis, dolore neque a sint ea laborum voluptatibus, facilis beatae quibusdam impedit voluptate non et rerum minima nesciunt architecto rem, magni reiciendis blanditiis nobis. Perferendis, possimus temporibus veritatis libero explicabo eos dolorem, optio, dolore ipsa vitae saepe eveniet! Voluptatum doloremque doloribus fuga asperiores itaque sint dolores, numquam!</div>
      <div class="box">Autem, modi nisi ipsam quae quis vitae similique, iste fugit expedita et, omnis consequatur iure quam sit porro possimus. Consectetur commodi harum cumque cum blanditiis, animi assumenda, ipsum molestias repudiandae deleniti, nulla quibusdam dolores! Fugiat quo quia quas quos cumque possimus debitis laboriosam nulla in illo quasi inventore, labore animi nam, quae? Repellendus ullam deleniti repudiandae, iusto similique totam, architecto doloribus quidem numquam! Magni rem eum minus totam doloribus ab et dicta aperiam obcaecati perspiciatis labore quas dolores repellendus, corporis esse inventore quibusdam fugiat itaque aspernatur. Praesentium aspernatur quibusdam fuga veritatis fugiat, tempore cumque sequi veniam dolorum unde hic in!</div>
      <div class="box">A velit cum nihil est laboriosam eum sunt, dolorum molestias sapiente. Laudantium deserunt assumenda explicabo doloremque eligendi qui porro? Dolore nam fugiat voluptates veritatis repudiandae consequuntur natus corporis saepe unde enim adipisci reiciendis, debitis neque. Tenetur itaque dolore numquam est nobis eaque necessitatibus, aperiam repellat aspernatur deleniti dolorem, velit magni reiciendis mollitia pariatur, aliquid modi dignissimos autem incidunt impedit quidem inventore placeat atque cupiditate minus! Nobis consequatur temporibus expedita aperiam libero tenetur itaque fugiat aliquid distinctio vitae soluta, fuga dolorum! Cum itaque saepe culpa. Distinctio id, quisquam quidem et. Veniam illum voluptate cupiditate, id blanditiis minus quidem, sunt dolore. Pariatur.</div>
     <div id="event"></div>
      <div class="box">Quod autem, voluptas qui placeat? Expedita rerum voluptatem placeat laborum, esse illum, ullam, reiciendis maxime eum ea officiis reprehenderit rem eveniet iusto vel ipsam quis. Officia maxime perspiciatis, eius a dolore inventore eum. Ea temporibus quaerat aut porro, delectus, ducimus, magnam est unde facere sequi dicta doloribus suscipit recusandae quibusdam ad eaque, assumenda dolorem ullam tempore amet quasi explicabo. Officiis nulla, quis, cumque animi modi molestiae fugiat ea? Minima magnam error iste animi at assumenda repudiandae temporibus beatae tempore consectetur, quae sequi mollitia porro maxime dolore perferendis eveniet reprehenderit reiciendis architecto veritatis dolores maiores blanditiis nihil! Quibusdam, voluptatem nemo commodi.</div>
      <div class="box">Commodi dolorem reiciendis tenetur. Harum omnis laborum nam in minima modi saepe praesentium, ullam quaerat nemo laudantium, ipsum. Provident odit nemo quam aliquid cumque ab nesciunt, harum ipsum dolores iste voluptates omnis eveniet beatae dignissimos aut illo, est id iure, libero a numquam hic obcaecati at, consectetur. Suscipit, debitis, ea. Blanditiis illum commodi provident ex perferendis architecto tenetur vel, inventore eius. Minus soluta voluptas delectus eum sint vero perspiciatis aliquid hic dolores quasi quae, quo sapiente molestias doloribus sed consequuntur distinctio qui, itaque magnam dolor laborum! Dolor minima, recusandae unde nostrum corrupti praesentium beatae quisquam omnis! Deserunt id, iure sit!</div>
      <div class="box">Laudantium nemo hic nam iusto, incidunt officiis, quam veniam ratione temporibus velit tenetur labore doloribus recusandae voluptate earum, dolorem odio aspernatur culpa. Fugiat accusamus numquam iste inventore modi unde obcaecati quas cum in dolore voluptas quaerat placeat maxime a aut magnam sint neque, eum reiciendis quisquam, aspernatur eveniet voluptatum nisi autem. Quo placeat totam obcaecati dignissimos eius dolores aut tempora, sequi! Molestias animi dolore ipsam placeat ea voluptatibus, repellendus provident expedita velit voluptatum esse modi dolor? Sapiente consequatur ducimus, at quas error fugit. Inventore commodi architecto temporibus incidunt reiciendis illo, adipisci excepturi vero, fugiat tempora consequatur, expedita suscipit qui, accusamus!</div>
      <div class="box">Laborum inventore libero fugiat, quas necessitatibus, dolor eligendi reiciendis fugit. Necessitatibus atque neque molestias vel distinctio repellat ducimus quibusdam, asperiores similique quisquam deleniti unde dignissimos delectus, nesciunt iure ipsa labore cupiditate libero illum temporibus eos fuga, sunt. Quo saepe voluptatem, rem consectetur voluptas autem distinctio aperiam quisquam! Cupiditate harum quam dignissimos. Ea minima vitae, perferendis laborum inventore recusandae. Maxime ratione perferendis similique, minima vel asperiores nihil voluptatem commodi vitae iure, minus veritatis, est praesentium rerum temporibus, quis. Dolore dolorem tenetur, nobis a tempore enim nemo suscipit mollitia blanditiis recusandae, assumenda iure veniam voluptatum placeat, veritatis. Nulla laboriosam deserunt repellat fugit!</div>  
  </div>
  
  <footer></footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

该脚本在 stackoverflow 上不起作用，这就是我添加 CodePen Demo 的原因

Answer 1

这将解决您的问题:

$(window).scroll(function () {
    var $el = $("#event")[0].getBoundingClientRect();
    if ($el.top - $el.height - 160 < 0) {
        $("#event").css({'visibility': 'visible'});
    } else {
        $("#event").css({'visibility': 'hidden'});
    }
});

CSS

#event {
position: relative;
width: 100%;
background: red;
height: 300px;
visibility: hidden; }

getBoundingClient() 给出了正确的顶部和高度值。引用:https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect

编辑:Display 属性因为之前的原因而出现异常。改变了使用可见性的方法。