I have the following problem.
In Firefox, when using the property .position()
, it is always relative to the position of the browser window, that is, it means that the position of the window never reaches the position of the element, because the position of top
said element increases. Instead, with Chrome this happens.
I thought about using the property .offset()
, but it doesn't get me the actual position of the element (it doesn't get the margins, so it's always below the actual position).
var menu;
var windowPosition = 0;
/* Secciones donde el menú debe ser negro */
var box1;
var box1Inicio = 0;
var box1Fin = 0;
var imgMenu;
$(window).load(function() {
menu = $(".menu");
if( $("#box-text-1").length ) {
box1 = $("#box-text-1");
box1Inicio = box1.offset().top; //Aquí es donde probé ambos métodos
box1Fin = box1Inicio + box1.outerHeight(true);
}
});
$(window).scroll(function() {
windowPosition = $(this).scrollTop();
if( windowPosition >= box1Inicio && windowPosition <= box1Fin ) {
imgMenu = menu.find(".menu-button").find("img").attr("data-black");
}
else {
imgMenu = menu.find(".menu-button").find("img").attr("data-white");
}
menu.find(".menu-button img").attr("src", imgMenu);
});
This code basically checks the top position of the browser, and if it's between those "start" and "end", it changes the menu image.
The HTML would be something like this:
<div class="seccion1">
...
</div>
<div class="seccion2" id="box-text-1">
...
</div>
<div class="seccion3">
...
</div>
Each section with its padding
' s and margin
s. As I mentioned above, the property offset()
does not get me these attributes, but with position()
Firefox it is always changing the values of top
.
Any solution that I can apply to this problem?
Edit: Added JSFiddle
Try to make the following modification.
Replace this:
For this: