如果向下滚动,弹出位置会改变

时间:2013-04-24 07:23:02

标签: javascript jquery html css3

我有一个弹出式div,单击一个图像即可显示,我想在点击的位置显示div。现在只有在页面处于默认位置时才有效,但不会滚动或不缩放。如果滚动或缩放,则弹出窗口的位置会发生变化。

正常弹出

enter image description here

没关系。

现在,当我向下滚动页面并单击齿轮图像(设置)时。它是这样的。

enter image description here

请看页面滚动和问题。另一个是当我缩放它。如果放大它的喜欢:

enter image description here

我的js是:

$('.settings img').live('click', function (event) {
            $('.set_pop').css('left',event.pageX);     
            $('.set_pop').css('top',event.pageY);
            $('.set_pop').css('display','inline');     
            $(".set_pop").css("position", "fixed");  
            $(".set_pop").show();
        });

我的css:蓝色(标题)其位置是固定的

.settings{
                float:right;
                margin-right: 3%;
                border: none;
                margin-top: 5px;
                cursor: pointer;

            }
            .set_pop{
                position:absolute;
                margin-right: 50px;
                margin-top:10px;
                width:100px;
                -webkit-box-shadow: #666 0px 2px 3px;
                -moz-box-shadow: #666 0px 2px 3px;
                box-shadow: #666 0px 2px 3px;
                border-radius:5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                z-index:10;
                background-color: #ffffff;
                color:#000;
            }

HTML

<div class="settings">
             <img src="images/setting.png" alt="settings" width="30px" height="30px"/>
               <div class="set_pop">
                   <ul class="strip">
                       <li onclick="location.href='register'">Manage Users</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   </ul>
            </div>
         </div>
抱歉发布了所有内容,实际上我能够解决问题,我尝试了各种脚本并更改了所有位置。我希望,有人可以帮助我。

谢谢&amp;问候

1 个答案:

答案 0 :(得分:2)

将您的班级更改为:

.set_pop {
background-color: #FFFFFF;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 2px 3px #666666;
color: #000000;
margin-right: 50px;
margin-top: 10px;
position: fixed;
width: 100px;
z-index: 10;
top: 40px;
z-index: 10;

}

我做的是,我将位置:绝对; 更改为位置:固定; 并添加“顶部”和“右侧”以正确定位。您可以相应地更改顶部/右侧。

  • 相对于文档显示绝对值(如果在另一个文档中,则为OR) 元素是相对于该元素的,只要它不是静态的)

  • 相对是相对于文档,但可以使用 左下角&amp;正确的属性和页面滚动

  • 固定显示固定在浏览器窗口中,因此不显示 如果您调整窗口大小,则滚动但移动

For detailed explanation, click here