Verán, en mi sitio tengo un menu de cabecera que siempre queda fijo al scroll. Para ello uso una funcion de Jquery que remueve la clase "fixed" del Div cuando el scroll está hasta arriba y la añade cuando comienza a descender quedando el Div en position:fixed.
Aqui el codigo que utilizo:
<script type="text/javascript">
$(document).ready(function() {
var menu = $('.menu');
var contenedor = $('#scroll');
var menu_offset = menu.offset();
$(window).on('scroll', function() {
if($(window).scrollTop() > menu_offset.top) {
menu.addClass('fijo');
} else {
menu.removeClass('fijo');
}
});
});
</script>
Bueno, este script en sí me funciona bien, pero aqui va el problema:
Por defecto (supongo) la propiedad Fixed mantiene el ancho de la ventana del navegador, o sea el 100%. Por lo que al estar el menu arriba no hay problema alguno, pero al momento de descender por el sroll este queda "fijo" al ancho de la ventana, y cuando la haces más pequeña no se puede mover hacia los lados, por lo tanto el menu queda cortado y ocupando el 100% de la ventana.
Mi pregunta es ¿Existe otra manera de dejar un Div fijo al hace scroll utilizando jQuery, sin tener que utilizar position:fixed? y de no poderse ¿Hay alguna forma de evitar que el Div estando en position:fixed me utilize el ancho de la ventana del navegador?
Eso Gracias de antemano