我的网页内容很大,并且有链接。当用户将鼠标悬停在链接上然后弹出一个div但是当我滚动浏览器窗口时,div位置应该在它出现时改变。如何以这样的方式编写和显示div的jquery,当用户拖动滚动条顶部和顶部时div应该打开并调整位置。下。请简单地告诉我们如何做到这一点。
答案 0 :(得分:10)
position:fixed;top:30px;left:30px;z-index:100;
第二个jQuery解决方案:
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>
干杯
-G。
答案 1 :(得分:5)
您可以使用jquery的滚动来跟踪用户滚动的时间,即:
$(window).scroll(function () {
$("#divId").offset({ left: left, top: top});
});
编辑:
另请查看此blog entry
答案 2 :(得分:1)
$(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
});
});