彈出位置正在改變，如果向下滾動

我有一個彈出div，這是一個圖像的點擊顯示，我想在點擊的地方顯示div。現在只有在頁面處於默認位置時才起作用，不滾動或不縮放。如果滾動或縮放，則彈出窗口的位置正在改變。彈出位置正在改變，如果向下滾動

正常彈出

enter image description here

這就是確定。

現在當我向下滾動頁面並點擊齒輪圖像（設置）。就像這樣。

enter image description here

請參閱THT滾動頁面時，問題。另一個是當我放大它。如果它像放大：

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>

抱歉發佈所有內容，實際上我無法解決問題，我嘗試了各種腳本並更改了所有的位置。我希望有人能幫助我。

感謝&問候

來源

2013-04-24 Aadam

嘗試使用CSS元素'top'和'right'定位彈出，而不是'margin'。更進一步，我會建議使用'位置：相對'，並將其放在/按鈕後面（並將其隱藏起來） – 2013-04-24 07:28:26

類改成這樣：

.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;

}

我做什麼，我改變了的位置是：絕對的;至職位：固定;並添加「頂部」和「右側」以正確定位。您可以相應地更改頂部/右側。

絕對相對於文檔被顯示（或者如果內部另一元件可相對於該元素，只要它是不固定的）
相對是相對於該文檔，但可使用被定位在頂左下向右&性能和滾動與頁面
固定顯示的是固定在瀏覽器窗口，因此不滾動，但如果你的調整窗口的大小動作

For detailed explanation, click here

來源

2013-04-24 07:35:13 AnAspiringCanadian

該死的，我真的是這樣，實際上那個腳本覆蓋了我的CSS。我刪除它和它的完美。謝謝老闆 – Aadam 2013-04-24 07:44:17

不客氣！ – AnAspiringCanadian 2013-04-24 07:46:38

彈出位置正在改變，如果向下滾動

回答

相關問題