jQuery addClass example

Change class name on click in jQuery

by CarambaMoreno

HTML

<div id="banner-message">
  <div class="hijo">
  <h1>    hijo
  </h1>
  <h1>
    hijo
  </h1>
  <h1>
    hijo
  </h1>
  <h1>
    hijo
  </h1>
  <h1>
    hijo
  </h1>
  <h1>
    hijo
  </h1>
  <h1>
    hijo
  </h1>
  
  </div>
</div>

CSS

#banner-message {
  background: yellow;
  margin-bottom: 100vh;
  margin-top:20vh;
  padding:1rem;
  float:left;
  width:30vw;
  overflow:hidden;
  white-space:nowrap;
}
.hijo h1{ display:inline;}

JavaScript

// find elements
var hijo = $(".hijo")
  $(window).scroll(function() {
    var top = $(window).scrollTop();
    hijo.css('transform','translateX('+top+'px)')
  })