Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Always visible div while scrolling

Tags:

On my aspx page, I have two left and right portions. I want to show always left side (which is actually a 'div' containig treeview) while scrolling the right side (which are actual contents of page). Thanks

like image 847
M Usman Shafique Avatar asked Jan 24 '12 13:01

M Usman Shafique


People also ask

How do you make a Div always visible on scrolling?

You need to put position: fixed; on the div element. That will anchor it to the viewport.

How do you make a scrolling element stay in HTML?

Use position fixed. Position fixed makes it so that an element stays at it's specified place even if the user scrolls up or down.

How do you fix a div on top when scrolling?

Just replace #sticky_div's_name_here with the name of your div, i.e. if your div was <div id="example"> you would put #example { position: sticky; top: 0; } .


1 Answers

Hi I found the best solution! As always JQUERY saving my life !!

Just put a Div called as you wan, I've chosen the same in the example below: #scrollingDiv.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script>     $().ready(function() {         var $scrollingDiv = $("#scrollingDiv");          $(window).scroll(function(){                         $scrollingDiv                 .stop()                 .animate({"marginTop": ($(window).scrollTop() )}, "slow" );                  });     }); </script> 

I took that code from a website, it works and it's pretty easy to understand.

like image 131
Despertaweb Avatar answered Sep 26 '22 01:09

Despertaweb