Adjust the position of the div to fit the scroll bar of the window

Question

the content of my page is great and there is a link. when the user clicks on the link, then the div appears, but when I look at the browser window, then the position of the div should change when it appears. how to write and show divs in jquery so that the div should open and adjust the position when the user drags the scroll bar from top to bottom. Please advice on how to do this is very simple.

Answer 1

You can use jquery scroll to track when the user scrolls, for example:

$(window).scroll(function () { $("#divId").offset({ left: left, top: top}); }); 

EDIT:

Also pay attention to this entry.

Answer 2

Hey, you can use pure CSS, for example. position:fixed;top:30px;left:30px;z-index:100;

jQuery second solution:

CSS

 <style type="text/css"> #mainmenu{position:absolute;left:30px;top:30px;z-index:100;} #content{height:2000px;} </style> 

JQuery

 <script type="text/javascript"> $(function(){ $(window).scroll(function(){ $('#mainmenu').animate({top:$(window).scrollTop()+30},500); }); }); </script> 

HTML:

 <div id="mainmenu"> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> <li><a href="">link 4</a></li> </ul> </div> <div id="content"> </div> 

Greetings

G.

Answer 3

 $(window).scroll(function () { var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var divWidth = windowWidth * 0.7; var divHeight = windowHeight * 0.7; $("#divPopup").width(divWidth); $("#divPopup").height(divHeight); var popupWidth = $("#divPopup").width(); var popupHeight = $("#divPopup").height(); $("#divPopup").css({ "position": "absolute", "top": (windowHeight / 2 - popupHeight / 2) + $(window).scrollTop(), "left": windowWidth / 2 - popupWidth / 2 }); });