jQuery toggleClass example

Toggle class name on click in jQuery

by hbmaam hbmaam

HTML

<div class="mobile-nav">
  <ul>
  <div id="scrollme" class="mainBobilescroll" >
    <li>
      <div class="link">
        <a href="" class="">Investors1</a>
      </div>
      <div class="link">
        <a href="" class="">Investors2</a>
      </div>
      <div class="link">
        <a href="" class="">Investors3</a>
      </div>
      <div class="link">
        <a href="" class="">Investors4</a>
      </div>
      <div class="link">
        <a href="" class="">Investors5</a>
      </div>
    </li>
  </div>
    <li id="Supportcontainer">
      <div style="display: block;">
        <div class="link">
          <a href="" class="">Support</a>
        </div>
      </div>
    </li>
  </ul>
</div>

<div id="previousButton" style="
                    width: 27px;
                    height: 28px;
                    background-color: red;
                    display: flex;
                    flex: auto;
                    position: absolute;
                    left: 0;
                    border-right-color: green;
                    border-right-width: 10px;
                    border-right: inset;
                ">
            </div>
            
            <div id="nextButton" style="
                    width: 27px;
                    height: 28px;
                    background-color: orange;
                    display: flex;
                    flex: auto;
                    position: absolute;
                    top: 4px;
                    right: 0;
                ">
            </div>

CSS

.link {
  display: inline;
}

.mobile-nav>ul {
  display: flex;
}

.mainBobilescroll {
  flex-grow: 1;
  height: 36px;
  overflow: scroll;
  white-space: nowrap;

}

.mobile-nav>ul>li:nth-child(2) {
  height: 36px;
  overflow: scroll;
   
  /*white-space: nowrap;*/
}

.mobile-nav>ul>div>li {
background-color:red;
}

JavaScript

$("#scrollme").scroll(function()
{ 
   var scrollPercentage = 100 * this.scrollLeft / (this.scrollWidth-this.clientWidth);
	
  if(scrollPercentage<=10)
  {
  $("#previousButton").hide();
  $("#scrollme").scrollLeft(0);
  }
  else
  {
  $("#previousButton").show();
  }
  console.log(scrollPercentage);
});

function getVerticalScrollPercentage( elm ){
    var p = elm.parentNode,
        pos = (elm.scrollLeft || p.scrollLeft) / (p.scrollwidth - p.clientwidth ) * 100
    
    return pos
}