Tengo una simple jQuery función–detalla a continuación, que estoy utilizando para manipular la posición de la cabecera del documento, y me pregunto si puedo añadir un parámetro, tal que la función es sólo ejecuta si la ventana del navegador es de un tamaño determinado? En este caso, me gustaría que el «stickyHeaderTop» función a ejecutar sólo si la ventana del navegador anchura excede de 1024px; ¿es esto posible?

<script type="text/javascript">
    $(function(){
    var stickyHeaderTop = $('header').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('header').css({position: 'fixed', top: '0px'});
            } else {
                    $('header').css({position: 'relative', top: '30px'});
            }
    });
});
</script>
  • Has mirado en la window.screen.availWidth atributo?
InformationsquelleAutor nickpish | 2012-08-19

2 Comentarios

  1. 6

    Puede utilizar el screen-Objeto del height, width, availHeight y availWidth atributos.

    En caso de que usted desea ejecutar algún código en las pantallas más pequeñas de 800px por ejemplo que acabo de hacer:

    if (screen.width < 800){
    //do stuff
    }

    Ser consciente de que esta es un área que tiene algunos cross-browser trampas (y problemas al tener sth como la stumbleupon barra de herramientas), por lo que una alternativa sería el uso de jQuery (que ya se está utilizando) para detectar su cliente del tamaño de la ventana:

    if ($(window).width() < 800){
    //do stuff
    }

    Leer más en MDN respecto a puro JS y jquery.com para el jQuery parte

    • gracias m90-sigue siendo un js principiante aquí; que era bastante sencillo!
  2. 0

    Podemos colocar algo como esto en su scroll evento de devolución de llamada.

    If ($(window).width() < 1024) {
        return;
    }
    • gracias por la respuesta, Alex; exactamente dónde iba yo a este lugar dentro de la función?

Dejar respuesta

Please enter your comment!
Please enter your name here