test123borisa

HTML

<div id="container1">


<div id="target"  >

<div class="one actual">aaa</div>
<div class="two ">bbb</div>
<div class="three ">ccc</div>
<div class="four ">ddd</div>
<div class="five ">fff</div>
<div class="one">aaa</div>
<div class="two">bbb</div>
<div class="three">ccc</div>
<div class="four">ddd</div>
<div class="five">fff</div>


</div>
</div>
<input type="text" value="value">

CSS

#container1{
  margin-top:50px;
    height: 170px;
    width: 500px;
    border: 1px solid green;
    overflow: hidden;
}

#target {
 width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 17px;
background-color:gray; 

position:relative;

}


.one{width:80px; height:30px; }
.two{ width:80px; height:30px; }
.three{ width:80px; height:30px; }
.four{ width:80px; height:30px; }
.five{ width:80px; height:30px; }

.actual{text-transform: uppercase; height:50px; background-color:purple;}

JavaScript

$(function () {

    // show hide subnav depending on scroll direction
    var position = $("#target").scrollTop();

    $("#target").scroll(function () {
        var scroll = $("#target").scrollTop();

        if (scroll > position) {

      // $("#target").animate({scrollTop: "20px"}, 1);
      //      $( "div.actual" ).prev().eq(0).removeClass( "actual" );
       $( "div.actual" ).next().eq(0).addClass( "actual" );   
    
            $("input").val("down");
            






        } else {

 
            $("input").val("up");
        }

        position = scroll;
    });

});