0

我有一个我不知道如何解决的问题,我希望这里的一些聪明人能给出答案。我有一个由 jquery 幻灯片效果控制的“联系表单”,仅当用户将鼠标悬停在图标上时才会出现。该效果使表单在包含表单的 div 的整个宽度内滑入和滑出浏览器的右侧边框。默认情况下,表单是隐藏的。到目前为止,我已经修复了该 div 并且一切工作正常,但后来我意识到它在我向下滚动时跟随页面,这是我不想要的。然后我将 div 设为绝对值,将其保留在原位,但因为我隐藏了右边距为 -250 的 div,它会将页面向右推这么多,在底部添加一个滚动条过程。

关于如何防止 div 向下滑动的任何想法,但同时如果向右溢出则停止?我想我可能需要另一个脚本来阻止固定 div 向下滑动,但这只是一个想法。任何帮助是极大的赞赏。

4

1 回答 1

0

给表格一个权利:0;这将始终保持表单与右边缘对齐并且不会溢出..

<div id="container">
   <div id="trigger">Show Form</div>
   <div id="form">
        Form Contents go here
   </div>

#container{
   position: relative;
}
#form{
  display:none;
  position: absolute;
  right: 0;
  top:0;
  width: 250px; 
  height: 100px; /* for demo */
  background: #999; /* for demo */
}
#form.visible{
   display: block;
}

$(document).ready( function() {
  $("#trigger").click(function() {
     $("#form").addClass("visible");
  });
});

http://jsfiddle.net/medmu/2/

于 2013-03-17T13:47:57.223 回答