Move Div Up and Down Using Css

Move Div Up and Down Using CSS

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 css.

We will show you that how we will move our sidebar with the scrollbar. We will use a div and css style.

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;top: 20px; float: left;border:1px solid #000;} 
.bigbox{padding: 50px;margin-left: 50px;width: 150px;height: 1800px;color:#fff;background-color: #d91636;margin-left:200px;box-shadow:0px 0px 5px 0px #d91636;} 
.top{position:fixed;}

above code will create two div and if you scroll one will go up and down with you.

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

~~~~ Happy Coding ~~~~