Move Div Up and Down Using Jquery

Move Div Up and Down Using Jquery

Many times we have seen that we have product list over our application/website and every time for selection new option we have to scroll to our navigation list which is at the top of our page. This is really annoying so for this best option is to move our list with our scroll. That’s sound better now so today we will see that how we can use it. We will move div up and down using jquery.

We will show you that how we will move our sidebar with the scrollbar. We will use jquery script.




DEMO

For this we will create two div’s and we will move 1 div.

Here is the HTML part for the div

<div id="sticky" class="darkbox">Hello its me !!! <br/> Vivek</div>
        <div class="bigbox">I will not move</div>

CSS part

.darkbox{padding: 50px;color:#fff; border-radius: 2px;background-color: #363636;float: left;box-shadow:0px 0px 5px 0px #d91636;}
            .bigbox{padding: 50px;margin-left: 50px;width: 150px;height: 1800px;color:#fff; border-radius: 2px;background-color: #d91636;margin-left:200px;box-shadow:0px 0px 5px 0px #d91636;}
            .top{position:fixed;}

above code will create two div and now we will write our jquery code which will create the magic.

var baseTop = $("div#sticky").offset().top;
$(window).scroll(function () {
    var top = $(window).scrollTop();
    if (top >= baseTop) {$("div#sticky").addClass("top");}
});

Hope you will like my new tutorial for Move Div Up and Down Using Jquery. if you have any query or feedback than please comment.

~~~~ Happy Coding ~~~~