相对于滚动位置定位 div答案

【问题标题】：Positioning a div relative to scroll position相对于滚动位置定位 div
【发布时间】：2009-09-23 12:42:04
【问题描述】：

此脚本显示和定位一个 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 相对于浏览器的滚动位置定位？

【问题讨论】：

标签： javascript html css

【解决方案1】：

只要你有

position: fixed;

会好的……

还是我在这里遗漏了什么？

例如，看看几个站点中的 UserVoice 公告图像，例如 tr.im（现已失效）

它具有我认为您正在尝试完成的行为，对吗？

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

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

尝试应用到您的代码:)

【讨论】：

完全做到了。不敢相信就这么简单:) 谢谢
添加了一种方法，而不是等待答案......把你的手弄脏和 D-I-Y :)

【解决方案2】：

您必须在 CSS 中使用表达式，例如：

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

【讨论】：

【解决方案3】：

可以使用 position:fixed，但除非您使用其中一种技巧来解决 IE6 不兼容问题，否则您会丢失 IE6。

【讨论】：

IE6 兼容性不是问题。此网页只会显示在没有客户端运行 IE 6 的 Intranet 上

【解决方案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>

【讨论】：