<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">


        <div class="collapse navbar-collapse" id="collapse-1">
    
          <ul class="nav navbar-nav navbar-right" data-price="0">
            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <strong>$0</strong></a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <h1 class="title">Toys</h1>
      <div class="row">
        <div class="col-sm-3 item" data-price="1">
          <a href="#"><img src="image.jpg" alt="" class="img-responsive"></a>
          <div class="title">
            Car
            <span>$1</span>
          </div>
          <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. 
          </div>
          <button class="btn btn-default btn-block"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart</button>
        </div>


   


      </div>
    </div>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
.title {
        margin-top: 60px;
      }

      .item {
        background-color: #fff;
      }

      .item .title {
        font-size: 14px;
        padding: 8px 0;
      }

      .item .title span {
        float: right;
        font-weight: bold;
      }

      .item .description {
        font-size: 12px;
        height: 60px;
      }

      .item-clone {
        position: fixed;
        z-index: 9999;
      }
$(document).ready(function() {
  
  if ( 0 < $('.item button').length ) {
    $('.item button').click(function() {
      var offset = $(this).parent().offset();
      $(this).parent().clone().addClass('item-clone').css({
        'left' : offset.left + 'px',
        'top' : parseInt(offset.top-$(window).scrollTop()) + 'px',
        'width' :  $(this).parent().width() + 'px',
        'height' : $(this).parent().height() + 'px'
      }).appendTo($('.item').parent());

      var cart = $('nav .navbar-right strong').offset();
      $('.item-clone').animate( { top: parseInt(cart.top-$(window).scrollTop()) + 'px', left: cart.left + 'px', 'height': '0px', 'width': '0px' }, 800, function(){
              $(this).remove();
              var price = parseInt($('nav .navbar-right').attr('data-price'));
              var itemPrice = parseInt($(this).attr('data-price'));
              var cartPrice = parseInt(price+itemPrice);
              $('nav .navbar-right strong').html('$' + cartPrice);
              $('nav .navbar-right').attr('data-price', cartPrice);
          });
    });
  }

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.