javascript - Add class to element when scrolling 100px above it -

-



i trying add class each element (class abc) when reaches 100px below top of viewport. cannot class added each individual element. rather adding class divs. suggestions?

$(function() {    $(document).scroll(function() {      if ($(this).scrolltop() >= $('.abc').offset().top - 100) {        $(".abc").addclass("color");      } else {        $(".abc").removeclass("color");      }    });  });
#header {    height: 150px;  }    .abc {    background-color: orange;  }    .color {    background-color: blue;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="header">    <h1>header</h1>  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>

your logic correct checking single element, achieve collection need loop on every element , evaluate position individually. this:

$(function() {    $(document).scroll(function() {      var scrolltop = $(this).scrolltop();            $('.abc').each(function() {        $(this).toggleclass('color', scrolltop >= $(this).offset().top - 100);      });    });  });
#header { height: 150px; }  .abc { background-color: orange; }  .color { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="header">    <h1>header</h1>  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>  <div class="abc">    lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque semper aliquam neque, id condimentum orci egestas ac. maecenas ullamcorper semper finibus. quisque vitae semper lorem, ut mattis mi. maecenas ut porta enim. duis tellus sem, tincidunt    vitae turpis tristique, laoreet sodales nunc. donec laoreet sollicitudin nibh, porta risus elementum id. vivamus et quam nec enim tincidunt tempus in sed ipsum. quisque non arcu sem. nulla eget massa ultricies, dignissim erat vel, tristique turpis.    pellentesque non maximus est, in feugiat nibh. morbi enim elit, sodales ac leo eget, interdum imperdiet elit. nunc dapibus scelerisque aliquet.  </div>





wiki

Comments

Post a Comment

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

-
i'm stuck project have check database of sip extension incoming caller id , dial sip extension. below receive when run script on asterisk cli. -- registered sip '9125' @ 192.168.1.102:50142 > saved useragent "zoiper rv2.8.40" peer 9125 [2017-08-22 13:53:33] notice[5095]: chan_sip.c:24558 handle_response_peerpoke: peer '9125' reachable. (17ms / 2000ms) == using sip rtp tos bits 184 == using sip rtp cos mark 5 -- executing [0112617769@from-trunk:1] answer("sip/obitrunk1-0000000d", "") in new stack > 0x1ca50d0 -- probation passed - setting rtp source address 192.168.1.98:16834 -- executing [0112617769@from-trunk:2] agi("sip/obitrunk1-0000000d", "test.py") in new stack -- launched agi script /var/lib/asterisk/agi-bin/test.py args: ['/var/lib/asterisk/agi-bin/test.py'] env line: agi_request: test.py env line: agi_channel: sip/obitrunk1-0000000d env line: agi_language: en env line: a
Read more

python - Read npy file directly from S3 StreamingBody -

-
i have many .npy (numpy) , .json files saved in s3, need download , load these files. for json files downloading files , loading dictionary using following code: obj = s3.object(bucket, key) response = obj.get() body = response['body'].read().decode('utf-8') data = json.loads(body) that way avoid writing .json file disk , reading it. now want same .npy files, equivalent? currently downloading file, saving temp file on disk , loading np.load avoid if possible. following https://stackoverflow.com/a/28196540/3509999 : obj = s3.object(bucket, key) io.bytesio(obj.get()["body"].read()) f: # rewind file f.seek(0) arr = np.load(f) wiki
Read more

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -

-
i start using kotlin , defined interface this: interface aadapter<vh : recyclerview.viewholder> { fun oncreateaviewholder(parent: viewgroup): vh fun onbindaviewholder(v: vh, position: int) } and when try use on code: class klasa ( private val adapter: aadapter<*> ) { fun dosth(){ //... val vh = this.adapter.oncreateaviewholder(parent) //on below line error adapter.onbindaviewholder(v, position) //... } } i error out-projected type 'aadapter<*>' prohibits use of 'public abstract fun onbindaviewholder(v: t, position: int): unit i tied add "in" or "out" definition i'm confused. how allow it. replace aadapter<*> aadapter<recyclerview.viewholder> . class klasa ( private val adapter: aadapter<recyclerview.viewholder> ) { // ... because have declared aadapter has type parameter vh type subclass of recyclerview.
Read more