Dudas css after - before

LR #1 Sep '15 Penitente

Buenas gente.

He estado trasteando con los pseudoelementos after y before para intentar crearme un sticky menu pero veo algunos fallos al usarlo desde el movil.

La idea era trastear un poco y hacerlo sin tirar de jquery para clonar elementos ni cosas asi, solo lo justo para añadir/eliminar clases.

El problema que tengo es que al usarlo desde el movil, no me lo deja fijo, es decir, hago scroll y cuando dejo de hacerlo es cuando me lo carga en el sitio. Una vez que se queda fijo, si vuelvo a hacer scroll, se mueve por la pantalla hasta que vuelvo a levantar el dedo.

Si siempre fuese asi pues diria "ok, la estoy liando" o lo que sea, pero el problema es que tengo un label que uso como boton para el menu y este label si que se me queda siempre fijo (label + before de ese label) da igual que haga scroll o lo que sea, el label + before siempre se quedan fijos y funcionan todos los eventos sobre ellos.

index.html

spoiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="test2.css">
    <link href='https://fonts.googleapis.com/css?family=Fjord+One' rel='stylesheet' type='text/css'>
    <title>Prueba Menu</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">

$(document).ready(function(){
    var altura = $('.switcher').offset().top;

    $(window).on('scroll', function(){
        if ( $(window).scrollTop() > altura ){
            $('.menu').addClass('menu-fixed fixed');
            $('.header').addClass('header-hidden');
            $('.switcher').addClass('check-fixed fixed');
        } else {
            $('.menu').removeClass('menu-fixed fixed');
            $('.header-hidden').removeClass('header-hidden');
            $('.switcher').removeClass('check-fixed fixed');
        }
    });
 
});
</script>
</head>
<body>
    <header class="header">
        <figure><img src="images/icono.png" alt="icono.png"><figcaption>Test menu</figcaption></figure>
        <section>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, facere."</section>
    </header>
    <section class="wrapper">
        <input type="checkbox" name="menu-switch" id="menu-switch">
        <label for="menu-switch" class="switcher"></label>
        <nav class="menu">
            <ul>
                <li class="elemento-menu"><a href="#">Inicio</a></li>
                <li class="elemento-menu"><a href="#">Servicios</a></li>
                <li class="elemento-menu"><a href="#">Partners</a></li>
                <li class="elemento-menu"><a href="#">Contacto</a></li>
                <li class="elemento-menu"><a href="#">About</a></li>
            </ul>
        </nav>
        <section class="contenido">
            <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi optio expedita atque ut neque quod consectetur ducimus rem id quas asperiores aspernatur accusantium ad ullam, praesentium explicabo illo nobis eos.</article>
            <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae provident vel iusto eveniet facilis laborum eius nisi repellat, ducimus unde laboriosam, ipsa, reprehenderit repudiandae qui ipsum commodi sit perspiciatis animi.</article>
             <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi optio expedita atque ut neque quod consectetur ducimus rem id quas asperiores aspernatur accusantium ad ullam, praesentium explicabo illo nobis eos.</article>
            <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae provident vel iusto eveniet facilis laborum eius nisi repellat, ducimus unde laboriosam, ipsa, reprehenderit repudiandae qui ipsum commodi sit perspiciatis animi.</article>
            <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae provident vel iusto eveniet facilis laborum eius nisi repellat, ducimus unde laboriosam, ipsa, reprehenderit repudiandae qui ipsum commodi sit perspiciatis animi.</article>
             <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi optio expedita atque ut neque quod consectetur ducimus rem id quas asperiores aspernatur accusantium ad ullam, praesentium explicabo illo nobis eos.</article>
            <article class="articulos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae provident vel iusto eveniet facilis laborum eius nisi repellat, ducimus unde laboriosam, ipsa, reprehenderit repudiandae qui ipsum commodi sit perspiciatis animi.</article>
        </section>
    </section>
    

</body>
</html>

css

spoiler

/*Reset and HTML5 Stuff */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, hr {margin : 0; padding : 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display : block;}
audio, canvas, video { display : inline-block; *display : inline; *zoom : 1;}

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('font/IcoMoon-Free.ttf?-b7qzp2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #d0d0d0;
    font-family: 'Fjord One', serif, verdana, 'sans-serif';
    font-size: 16px;

}


header {
    position: relative;
    border-bottom: 1px solid #000;
    overflow: hidden;
    background-color: #222223;
}

header section{
    color: #f0f0f0;
    float: left;
    display: inline-block;
    overflow: hidden;
    width: 50%;
    height: 150px;
    padding: 3% 2%;
    text-align: left;
    font-size: .9em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-style: italic;
}

figure {
    padding: .8em 0 .8em .8em;
    width: 40%;
    margin: 0px;
    float: left;
}

figure figcaption{
    color: #f0f0f0;
    margin: 0 0 0 5%;
    width: 100%;
    font-weight: bolder;
}
figure img{
    width: 100px;
}

.contenido {
    margin: 0px;
    padding: 1% 0;
    width: 100%;

}

.articulos {
    background-color: #444444;
    color: white;
    border: 1px solid black;
    margin: 1% auto 2%;
    text-align: justify;
    padding: 5px 10px;
    width: 95%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    text-indent: 10px;
}

.menu {
    background-color: #121213;
    width: 100%;
    margin: 0 auto;
    height: 0px;
    overflow: hidden;
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
    -o-transition: height 1s;
    transition: height 1s;
}

.menu a {
    text-align: center;
    display: block;
    padding: .7em;
    color: #f0f0f0;
    font-size: 0.9em;
    text-decoration: none;
    -moz-transition: color 0.2s, background .2s;
    -webkit-transition: color 0.2s, background .2s;
    -o-transition: color 0.2s, background .2s;
    transition: color 0.2s, background .2s;
}
.menu a:hover {
    color: #c74438;
    font-weight: bold;
    background: -webkit-linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(85,20,20,0.65) 100%);
    background: -o-linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(85,20,20,0.65) 100%);
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(85,20,20,0.65) 100%);
}

.menu li{
    border-bottom: 1px solid #000;
}
.wrapper {
    position: relative;
    border-top: 1px solid black;
    padding: 0px;
    margin: 0px;
    width: 100%;
}


#menu-switch {
    display: none;
}
#menu-switch:checked ~ .menu{
    height: 200px;
}

#menu-switch:checked ~ .switcher::after {
    content: "";
    color: #c74438;
    z-index: 1000;
}
#menu-switch:not(:checked) ~ .switcher::after {
    color: #f0f0f0;
    content: "";
    z-index: 1000;
}

.switcher{
    font-family: 'IcoMoon-Free';
    background-color: #121212;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
    height: 3em;
    width: 3em;
    top: -50px;
    line-height: 3em;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 2.5%;
    border-radius: 5px 5px 0 0;
    z-index: 1000; 
}

.switcher::after {
    border-radius: 5px 5px 0 0; 
    color: #f0f0f0;
    content: "";
    display: block;
    text-align: center;
    z-index: 1000; 
}

.switcher:hover::after {
    content: "";
    display: block;
    color: #c74438;
    text-align: center;
    border-radius: 5px 5px 0 0; 
}

.header-hidden {
   visibility: hidden;
}

.check-fixed {
    position: fixed !important;
    top: 0px !important;
    z-index: 1000;
}

.check-fixed::before{
    background-color: #151515;
    box-shadow:0px 4px 3px rgba(0,0,0,.7);
    color: #f0f0f0;
    content: "Test Menu";
    font-family: 'Fjord One', serif, verdana, 'sans-serif';
    font-weight: bolder;
    height: 50px;
    left: 0px;
    padding: 0 0 0 7%;
    position: fixed;
    text-align: left;
    top: 0px !important;
    width: 100%;
    z-index: -1;
    margin: 0px;
}

.menu-fixed {
    position:fixed !important;
    z-index:1000;
    top: 50px !important;
    box-shadow:0px 4px 3px rgba(0,0,0,.7);
}

.fixed {
    opacity: 0.95;
}

De camino si teneis algun consejo o veis alguna burrada avisad que hace bastante que no toco nada de codigo

DrasaR #2 Sep '15

El evento scrolltop en moviles no se lanza hasta que ha parado la "inercia" del movil. Había varias soluciones para ello, pero preparate para meterte en un mar de lágrimas.

1 respuesta

LR #3 Sep '15 Penitente

#2 He estado mirando y solo me falla en el navegador de android. En chrome si me va perfecto.

Otra cosa que me extraña es que solo pasa con el after que uso de fondo, tanto el label como el before se quedan siempre fijos da igual que haga scroll o lo que sea, funcionan bien, pero el after hace ese extraño solo en el navegador de android, cosa que me toca la moral un poco..

LR #4 Sep '15 Penitente

Ya lo he arreglado.

Lo que he hecho ha sido usar el label como fondo en vez del after y hacer algun que otro ajuste de css.

Ahora al menos no baila cuando hago scroll, aunque hasta que no levantas el dedo no aparece/desaparece, pero bueno, algo es algo.

css

spoiler

/*Reset and HTML5 Stuff */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, hr {margin : 0; padding : 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display : block;}
audio, canvas, video { display : inline-block; *display : inline; *zoom : 1;}

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('font/IcoMoon-Free.ttf?-b7qzp2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #d0d0d0;
    font-family: 'Fjord One', serif, verdana, 'sans-serif';
    font-size: 16px;

}


header {
    position: relative;
    border-bottom: 1px solid #000;
    overflow: hidden;
    background-color: #222223;
}

header section{
    color: #f0f0f0;
    float: left;
    display: inline-block;
    overflow: hidden;
    width: 50%;
    height: 150px;
    padding: 3% 2%;
    text-align: left;
    font-size: .9em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-style: italic;
}

figure {
    padding: .8em 0 .8em .8em;
    width: 40%;
    margin: 0px;
    float: left;
}

figure figcaption{
    color: #f0f0f0;
    margin: 0 0 0 5%;
    width: 100%;
    font-weight: bolder;
}
figure img{
    width: 100px;
}

.contenido {
    margin: 0px;
    padding: 1% 0;
    width: 100%;

}

.articulos {
    background-color: #444444;
    color: white;
    border: 1px solid black;
    margin: 1% auto 2%;
    text-align: justify;
    padding: 5px 10px;
    width: 95%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    text-indent: 10px;
}

.menu {
    background-color: #121213;
    width: 100%;
    margin: 0 auto;
    height: 0px;
    overflow: hidden;
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
    -o-transition: height 1s;
    transition: height 1s;
}

.menu a {
    text-align: center;
    display: block;
    padding: .7em;
    color: #f0f0f0;
    font-size: 0.9em;
    text-decoration: none;
    -moz-transition: color 0.2s, background .2s;
    -webkit-transition: color 0.2s, background .2s;
    -o-transition: color 0.2s, background .2s;
    transition: color 0.2s, background .2s;
}
.menu a:hover {
    color: #c74438;
    font-weight: bold;
    background: -webkit-linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(85,20,20,0.65) 100%);
    background: -o-linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(85,20,20,0.65) 100%);
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(85,20,20,0.65) 100%);
}

.menu li{
    border-bottom: 1px solid #000;
}
.wrapper {
    position: relative;
    border-top: 1px solid black;
    padding: 0px;
    margin: 0px;
    width: 100%;
}


#menu-switch {
    display: none;
}
#menu-switch:checked ~ .menu{
    height: 200px;
}

#menu-switch:checked ~ .switcher::after {
    content: "";
    color: #c74438;
    z-index: 1000;
}
#menu-switch:not(:checked) ~ .switcher::after {
    color: #f0f0f0;
    content: "";
    z-index: 1000;
}

.switcher{
    top: -50px;
    position: absolute;
    width: 100%;

}

.switcher::after {
    text-align: center;
    background-color: #121212;
    border-left: 2px solid black;
    border-radius: 5px 5px 0 0;
    border-right: 2px solid black;
    border-top: 2px solid black;
    color: #f0f0f0;
    content: "";
    display: block;
    float: right;
    font-family: 'IcoMoon-Free';
    line-height: 3em;
    padding: 0 1em;
    margin: 0 3% 0 0;
    z-index: 1000; 
}

.switcher:hover::after {
    content: "";
    display: block;
    color: #c74438;
    border-radius: 5px 5px 0 0; 
}

.header-hidden {
}

.check-fixed {
    position: fixed !important;
    top: 0px !important;
    z-index: 1;
    width: 100%;
    background-color: #151515;
    box-shadow:0px 4px 3px rgba(0,0,0,.7);
    -moz-box-shadow:0px 4px 3px rgba(0,0,0,.7);
    -webkikt-box-shadow:0px 4px 3px rgba(0,0,0,.7);
    -webkit-backface-visibility: hidden;
    border-bottom: 2px solid #000;
    height: 48px !important;
}

.check-fixed::before{
    color: #f0f0f0;
    content: "Test Menu";
    font-family: 'Fjord One', serif, verdana, 'sans-serif';
    font-weight: bolder;
    height: 50px;
    padding: 0 0 0 7%;
    line-height: 50px;
    text-align: left;
}

.menu-fixed {
    position:fixed !important;
    z-index:1000;
    top: 50px !important;
    box-shadow:0px 4px 3px rgba(0,0,0,.7);
    -moz-box-shadow:0px 4px 3px rgba(0,0,0,.7);
    -webkit-box-shadow:0px 4px 3px rgba(0,0,0,.7);
    opacity: 0.95;
}

footer {
    background-color: #222223;
    width: 100%;
    overflow: hidden;
}

.footer {
    float: left;
    width: 49%;
    margin: 0 1%;
    padding: 5% 0;
}

.footer ul {
    width: 100%;
    border-right: 1px dashed #121212;
    padding: 8% 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.footer li {
    list-style-type: none; 
    width: 75%;
    margin: 2% auto;
    text-align: center;
}

footer a {
    display: block;
    text-decoration: none;
    color: #e6d690;
    border-radius: 5px;
    -webkit-transition: box-shadow .5s, background-color 1s;
    -moz-transition: box-shadow .5s, background-color 1s;
    -o-transition: box-shadow .5s, background-color 1s;
    transition: box-shadow .5s, background-color 1s;  

}

footer a:hover{
    background-color: #121212;
    box-shadow: 2px 2px 0px 1px black;
    -moz-box-shadow: 2px 2px 0px 1px black;
    -webkit-box-shadow: 2px 2px 0px 1px black;
    text-shadow: 1px 1px black;
}

.contacto {
    font-family: 'IcoMoon-Free';
    font-size: 1.4em;
    overflow: hidden;
    margin-top: 10%;
    float: left;
    width: 49%;
}

.item-contacto {
    float: left;
    margin: 5% 0 5% 24%;
}

Dudas css after - before

Usuarios habituales

Tags