Positionnement d'un div par rapport à défiler la position

Question

Ce script montre et positionne un div
comme:

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() 
} 

et ainsi de suite
<b onclick="myfunction()">Click here</b>

Bien sûr, il est un peu plus que cela, mais cela est pour te montrer ce que j'essaye de faire. Cela fonctionne bien, la div remplit l'écran comme il se doit. Le problème est quand parfois nous montrons beaucoup de liens si l'utilisateur doit faire défiler .. quand le div montre son toujours sur le haut de la page et l'utilisateur y fait défiler quand il obtient le focus. Lorsque l'utilisateur a terminé et ferme la div, il doit retrouver son chemin dans la liste où il était.

Est-il possible de positionner la div par rapport à la position de défilement du navigateur?

Answer 1

aussi longtemps que vous avez la

position: fixed; 

sera ok ...

ou suis-je manque quelque chose ici?

---

Jetez un oeil à, par exemple, annoncent UserVoice image dans plusieurs sites, comme tr.im (aujourd'hui disparu)

il a le comportement qui, je pense, vous essayez d'accomplir, je suis J'ai raison?

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

le css que vous pouvez saisir de Firebug est:

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

essayer d'appliquer à votre code :)

Answer 2

vous devez utiliser une expression CSS, quelque chose comme ça:

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

Answer 3

pourrait utiliser position: fixed, mais vous perdriez IE6 à moins que vous n'utilisiez l'un des hacks pour contourner l'incompatibilité IE6.

Answer 4

J'ai utilisé ce faire: http://www.pixelbind.com/make-a-div-stick-when-you-scroll/#comment-800

Mais je devais modifier le CSS à utiliser « absolu », et non « fixe » - qui obtient autour du bug IE et vous permet d'être en mesure de préciser le nombre en pixels du haut où vous voulez afficher la div.

Essayez:

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

et en ajoutant des lignes à une table pour obtenir une ligne de tableau qui suit la table que vous faites défiler:

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