Stick or fix DIV at top after scrolling


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(window).scroll(function(){
      if ($(this).scrollTop() > 320) {
          $('.scroll-div').addClass('fixed');
      } else {
          $('.scroll-div').removeClass('fixed');
      }
  });
</script>
<style>
.scroll-div{background:#333;width:1000px;margin:0 auto;height:100px;}
.fixed{position:fixed;top:0;width:100%;left:0;}
</style>
</head>
<body>
<div class="scroll-div">Scrolling DIV</div>
</body>
</html>

How to create JavaScript classes to an element


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
    var k = 0;
    jQuery("div").attr('class', function() {
    k++;
    return 'box-'+k;
  });
});
</script>
</head>
<body>
<div>Box 01</div>
<div>Box 02</div>
<div>Box 03</div>
</body>
</html>