jQuery Simple Example

by Bhumika107

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="container">

  <div class="caroseul">

    <!--row-->
    <div class="row">

      <!--item-->
      <div class="item">

        <!--unit-->
        <div class="unit">
          <div class="wraps">
            <img src="http://www.hollywoodtake.com/sites/default/files/styles/large/public/2013/06/01/mila-kunis.jpg?itok=5F0P5qGY">
            <h3>A Unit</h3>
          </div>
        </div>
        <!--unit-->

      </div>
      <!--item-->


      <!--item-->
      <div class="item">

        <!--unit-->
        <div class="unit">
          <div class="wraps">
            <img src="http://filmsplusmovies.com/wp-content/uploads/2012/11/Demi-Moore-Pictures-7.jpg">
            <h3>A Unit</h3>
          </div>
        </div>
        <!--unit-->

      </div>
      <!--item-->

    </div>
    <!--row-->



    <!--row-->
    <div class="row" style="left:100px">

      <!--item-->
      <div class="item">

        <!--unit-->
        <div class="unit">
          <div class="wraps">
            <img src="http://www.hollywoodtake.com/sites/default/files/styles/large/public/2013/06/01/mila-kunis.jpg?itok=5F0P5qGY">
            <h3>A Unit</h3>
          </div>
        </div>
        <!--unit-->

      </div>
      <!--item-->


      <!--item-->
      <div class="item">

        <!--unit-->
        <div class="unit">
          <div class="wraps">
            <img src="http://filmsplusmovies.com/wp-content/uploads/2012/11/Demi-Moore-Pictures-7.jpg">
            <h3>A Unit</h3>
          </div>
        </div>
        <!--unit-->

      </div>
      <!--item-->

    </div>
    <!--row-->
    
    
    
    
    <!--row-->
    <div class="row">

      <!--item-->
      <div class="item" style="width:450px">

        <!--unit-->
        <div class="unit">
          <div class="wraps">
            <img...

CSS

.container {
  background: grey;
  overflow-y: hidden;
  width: 500px;
  height: 220px;
}

.unit img {
  width: 51px;
  height: auto;
  float: left;
}

.item.stick {
  background: orange;
}

.caroseul {
  width: 1000px;
  background: blue;
  position: relative;
  left: 120px;
  overflow: hidden;
}

.item {
  width: 300px;
  height: 65px;
  background: pink;
  border: 1px solid black;
  float: left;
}

.wraps {
  border: 1px solid black;
  overflow: hidden;
}

.unit {
  padding-left: 0;
  width: 120px;
  /* -moz-transition: padding-left .3s ease-in;
  -o-transition: padding-left .3s ease-in;
  -webkit-transition: padding-left .3s ease-in;
  transition: padding-left .3s ease-in; */
}

.unit.hit {
  background-color: red;
  color: white;
}


.row{
  float:left;
  position:relative;
}

JavaScript

$(document).ready(function() {
// removed isElementInViewport function
  var currentPadding = 0;
  var newPadd = 0;

  function compensatePadding() {
    var itemLeft = Math.abs(parseInt($('.caroseul').offset().left));
    console.log("itemLeft", itemLeft)
    newPadd = Math.abs(itemLeft);
		
    $('.stick .unit').each(function(index,el){
      var off = $(el).parents(".row").position().left + $(el).parents(".item.stick").position().left;
   		var parent = $(el).parents(".item.stick");
   		if(parent.offset().left+parent.width() >= 0 && (parent.width() - $(el).width() > parseInt(newPadd-off))) {
    		$(el).css("padding-left", parseInt(newPadd-off) + "px");
   		}
    })
  }


  var unitWidth = $('.unit').width();
  console.log("unitWidth", unitWidth);


  function onVisibilityChange(el, callback) {
    var old_visible;
    return function() {
      var visible = isElementInViewport(el);
      if (visible != old_visible) {
        old_visible = visible;
        if (typeof callback == 'function') {
          callback();
        }
      }
    }
  }

  function checkVisible() {
    console.log("checkvisible");

    var labelGroups = $('.caroseul .item .unit');
    var length = labelGroups.length;

    for (i = 0; i < length; i++) {

      //var isItemLabelInView = isElementInViewport(labelGroups[i]);
      
			// check if .unit is going out of viewport from left
      if ($(labelGroups[i]).offset().left < 0) {
        $(labelGroups[i]).closest(".item").addClass("stick");
      } else {
        $(labelGroups[i]).closest(".item").removeClass("stick");

        //reset moved items
        $(labelGroups[i]).css("padding-left", 0);
      }

      console.log(" labelGroups[i]", labelGroups[i]);
      //console.log("isItemLabelInView", isItemLabelInView);
    }

    compensatePadding();
  }



  $('.container').on('scroll', checkVisible);

});