jQuery addClass example

Change class name on click in jQuery

by Shuaib Khan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  Content
</div>
<div id="slide">
  <div id="handle">Header</div>
  <div id="slideContent">Slider Content</div>
</div>

CSS

html,body{margin:0; padding:0; background:#222;color:#ddd}
#content{
background:#111; color:#dd0;
}
#slide{width:100%;
position:fixed; top:92vh; left:0; background:rgba(255,255,255,0.3);z-index: 9999;
}
#handle{
width:100%; height:8vh; display:flex; flex-direction:row;
align-items:center; justify-content:center;
background:#ff0; color:#222;
}
#slideContent{
height:92vh; overflow-y:scroll;
}

JavaScript

$(function(){
    for(var i=0; i<40; i++){
      $("#content").append("<br/><br/>Content");
    }
  
      var dragItem = document.querySelector("#handle");
      var container = document.querySelector("body");
      var winH = $(window).height();
      var winW = Math.round( $(window).width() );
      var headerH = Math.round( $("#handle").height() );
      var active = false;
      var presentX, presentY, dragStartX, dragStartY;
      var originX = 0;
      var originY = winH - headerH;
  
      container.addEventListener("touchstart", dragStart, false);
      container.addEventListener("touchend", dragEnd, false);
      container.addEventListener("touchmove", dragging, false);
  
      container.addEventListener("mousedown", dragStart, false);
      container.addEventListener("mouseup", dragEnd, false);
      container.addEventListener("mousemove", dragging, false);
  
      function dragStart(e) {
        if (e.type === "touchstart") {
          dragStartX = e.touches[0].clientX - originX;
          dragStartY = e.touches[0].clientY - originY;
        } else {
          dragStartX = e.clientX - originX;
          dragStartY = e.clientY - originY;
        }
        if (e.target === dragItem) {
          active = true;
        }
      }
  
      function dragEnd(e) {
        dragStartX = presentX;
        dragStartY = presentY;
        active = false;
      }
  
      function dragging(e) {
        if (active) {
          e.preventDefault();
        
          if (e.type === "touchmove") {
            presentX = e.touches[0].clientX - dragStartX;
            presentY = e.touches[0].clientY - dragStartY;
          } else {
            presentX = e.clientX - dragStartX;
            presentY = e.clientY - dragStartY;
          }
          originX = presentX;
          originY = presentY;
          
          if(presentX <= winW && presentX>=0 && presentY<=winH-navH && presentY >=0){
              $("#slide").css("transform","translate3d("+presentX+"px,...