J'ai un problème avec Internet Explorer 6 et FF avec quelque chose que j'essaie d'implémenter dans jQuery. Fondamentalement, il y a un objet en haut de la page utilisant un contenu flottant qui semble interférer avec la propriété $ (window) .scrollTop().jQuery Obtenir la marge supérieure requise pour mettre l'élément en haut de l'écran
C'était ma compréhension (et si je me trompe, s'il vous plaît aidez-moi en me disant la bonne façon!) Que $ (window) .scrollTop() retournera l'espace caché par le défilement. J'ai fait quelques tests sans le contenu flottant et ils semblent soutenir cela.
Ceci est mon code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
Ceci est le document html qui montre l'erreur (vous venez de commenter le "evilFloatomoton" div ci-dessous pour voir fonctionner correctement)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
Alors Au lieu d'être contre le bord supérieur comme je le pensais, c'est à mi-chemin de la page dans mes tests. Quelqu'un peut-il m'aider?