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

你可以从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

尝试申请代码：）

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>

相对于滚动位置定位div

4 个答案: