Позиционирование DIV относительно положение прокрутки

Question

Этот скрипт показывает и позиционирует DIV
как:

function myfunction() 
{ 
    obj.style.visibility = "visible"; 
    obj.style.width: "100%"; 
    obj.style.height = "100%"; 
    obj.style.position = "absolute"; 
    obj.style.top: "0px"; 
    obj.style.left: "0px"; 
    obj.style.z-index = "44"; 
    obj.focus() 
} 

и так далее
<b onclick="myfunction()">Click here</b>

Конечно, это немного больше, чем это, но это чтобы показать вам, что я пытаюсь сделать. Это хорошо работает, div заполняет экран так, как должен.

Проблема заключается в том, что иногда мы показываем много ссылок, поэтому пользователю приходится прокручивать .. когда div показывает его всегда в верхней части страницы, и пользователь получает прокрутку туда, когда он получает фокус. Когда пользователь будет завершен и закрывает div, он должен найти свой путь обратно по списку, где он был.

Есть ли способ расположить div относительно позиции прокрутки браузеров?

Answer 1

, пока у вас есть

position: fixed; 

будет ок ...

или я что-то пропустил?

---

Взгляните, например, UserVoice объявить изображение в нескольких местах, как tr.im (ныне несуществующей)

имеет поведение, которое, я думаю, вы пытаетесь достичь, я Я прав?

alt text http://www.balexandre.com/temp/2009-09-23_1449.png

CSS-код, который вы можете получить от FireBug является:

a#uservoice-feedback-tab { 
    background:#A5C1D1 url(http://feedback.tr.im/images/feedback_tab_black.png) no-repeat scroll -2px 50%; 
    border-color:#A5C1D1 -moz-use-text-color #A5C1D1 #A5C1D1; 
    border-style:outset none outset outset; 
    border-width:1px medium 1px 1px; 
    display:block; 
    height:90px; 
    margin-top:-45px; 
    position:fixed; 
    right:0; 
    top:40%; 
    width:25px; 
    z-index:100001; 
} 

alt text http://www.balexandre.com/temp/2009-09-23_1450.png

пытаются применить к коду :)

Answer 2

вы должны использовать выражение в CSS, что-то вроде этого:

.div { 
position:fixed; 
top:expression(window.scrollTop + "px"); 
... 
} 

Answer 3

может использовать положение: исправлено, но вы потеряете IE6, если не используете один из хаков, чтобы обойти несовместимость IE6.

Answer 4

Я использовал это, чтобы сделать это: http://www.pixelbind.com/make-a-div-stick-when-you-scroll/#comment-800

Но я должен был изменить CSS, чтобы использовать «абсолютное», а не «фиксированной» - который получает вокруг ошибки IE и позволяет быть в состоянии указать номер в пикселях сверху, где вы хотите отобразить div.

Try:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
var s = $("#sticker"); 
var pos = s.position();      
$(window).scroll(function() { 
    var windowpos = $(window).scrollTop(); 
    s.css("top", windowpos + 150); 
    //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
    s.html("<table width='750' align='center' style='color:white;font-face:Times;font-weight:bold;text-decoration:underline'><tr><td align='center' width='61%'>Column 1</td><td align='center'><span style='' width='10%'>Column 2</td><td align='center' width='29%'>Column 3</td></tr></table>"); 
    if (windowpos >= pos.top) { 
     s.addClass("stick"); 
     $(".linebreak").show(); 
    } else { 
     s.removeClass("stick"); 
     $(".linebreak").hide(); 
    } 
}); 
}); 
</script> 
<style type="text/css"> 

div#sticker { 
padding:11px; 
background:#AAA; 
} 
.stick { 
position:absolute; 
z-index:-10; 
color:white; 
} 
</style> 

и добавление строк в таблицу, чтобы получить строку таблицы, которая следует за стол, как вы прокручивать:

<tr> 
<td colspan="3"> 
    <div id="sticker" class="stick"> 
     <table width="780" style="text-decoration:underline;color:white;font-weight:bold"> 
      <tr> 
       <td align="center" width="61%">Column 1</td> 
       <td align="center" width="10%">Column 2</td> 
       <td align="center" width="29%">Column 3</td> 
      </tr> 
     </table> 
    </div> 
</td> 
</tr> 
<tr><td class="linebreak"><p>&nbsp;</p></td></tr> 
<tr><td class="linebreak"><p>&nbsp;</p></td></tr> 
<tr><td class="linebreak"><p>&nbsp;</p></td></tr>