Die Positionierung eines div relativ zur scrollPosition

Dieses Skript zeigt und die Position eines div
wie:

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

usw
<b onclick="myfunction()">Click here</b>

Natürlich ist es ein bisschen mehr als das, aber das ist Ihnen zu zeigen, was ich zu tun versuche.
Dies funktioniert gut, der div füllt den Bildschirm, wie es sollte.

Das problem ist, wenn manchmal zeigen wir eine Menge links, so dass der Benutzer scrollen.. wenn das div zeigt immer auf den Anfang der Seite, und der Benutzer wird gescrollt, bis es, wenn es den Fokus erhält. Wenn der Benutzer fertig ist, und schließt das div, er muss seinen Weg finden wieder in der Liste nach unten, wo er war.

Gibt es eine Möglichkeit, um die position des div relativ zu der Browser die scroll-position?

InformationsquelleAutor Jonas B | 2009-09-23

7

solange Sie die
```
position: fixed;
```
wird ok sein...

oder bin ich hier etwas fehlt?

Werfen Sie einen Blick auf, beispielsweise UserVoice verkünden Bild in mehreren Standorten, wie tr.im (nicht mehr existierenden)

er hat das Verhalten, dass ich denke, Sie versuchen zu erreichen, habe ich Recht?

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

der css, die Sie ergreifen können, von FireBug ist:
```
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

anzuwenden versuchen, um Ihren code 🙂

Total hat es getan. Kann nicht glauben, es war so einfach 🙂 Danke
Hinzugefügt einen Weg, um zu, anstatt zu warten, für eine Antwort ... legen Sie Ihre hand schmutzig und D-I-Y -:)

InformationsquelleAutor balexandre
0

müssen Sie einen Ausdruck verwenden, der in CSS, etwas so:
```
.div {
position:fixed;
top:expression(window.scrollTop + "px");
...
} 
```
InformationsquelleAutor Khodor
0

konnte mit position:fixed, aber Sie verlieren würde, IE6, es sei denn, Sie verwenden einen der hacks zu bekommen, um die IE6-Inkompatibilität.

IE6-Kompatibilität ist kein Thema. Diese Webseite wird nur angezeigt, auf einem intranet, wo die clients nicht laufen, IE 6

InformationsquelleAutor Ty W

Habe ich dies zu tun: http://www.pixelbind.com/make-a-div-stick-when-you-scroll/#comment-800

Aber ich hatte zum Bearbeiten der CSS zu verwenden, "absolute", nicht "fixiert" - die rund um den IE bug und ermöglicht es Ihnen, zu können, geben Sie die Zahl in Pixeln von der Oberseite, wo Sie wollen, um den div.

Versuchen:

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

und hinzufügen von Zeilen zu einer Tabelle um eine Zeile in der Tabelle folgt, dass die Tabelle beim scrollen:

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

InformationsquelleAutor vapcguy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.