相对于滚动位置定位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（现已停用）

我认为您正在努力做到这一点，对吗？

替代文字http://www.balexandre.com/temp/2009-09-23_1449.png

您可以从FireBug中获取的CSS是：

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

替代文字http://www.balexandre.com/temp/2009-09-23_1450.png

尝试将其应用于您的代码：）

Answer 2

您必须在CSS中使用表达式，如下所示：

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

Answer 3

可以使用position：fixed，但是除非使用其中一种黑客解决IE6不兼容的方法，否则您将失去IE6。

Answer 4

我用它来做到这一点： http : //www.pixelbind.com/make-a-div-stick-when-you-scroll/#comment-800

但是我不得不编辑CSS以使用“绝对”而不是“固定”的代码-它绕开了IE错误，并允许您从要显示div的顶部开始以像素为单位指定数字。

尝试：

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