https://hotexamples.com Obtiene ejemplos de cualquier lenguaje de programación con sólo indicar el tipo y la clase + el método a buscar.
Escribir: Google_Client createAuthUrl
Para extender una clase dentro de una media query, el problema con el que nos encontramos es:
.small-btn {
padding: 5px;
&:hover {
background-color: white;
color:black;
}
}
@media (max-width: 768px) {
button {
@extend .small-btn;
}
}
Arroja el error
Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .small-btn" on line 7 of src/scss/main.scss
Solución:
La respuesta es un @mixin. Con un @mixin podemos importar todas las las reglas que queramos facilmente. Lo que podríamos hacer es poner el código de la clase que queremos extender, dentro de un @mixin. Entonces, tanto la clase como la sección dentro del mediaquery usarán el @mixin
@mixin small-btn-mixin() {
padding: 5px;
&:hover {
background-color: white;
color:black;
}
}
.small-btn {
@include small-btn-mixin();
}
@media (max-width: 768px) {
button {
@include small-btn-mixin();
}
}
La limitación es que hay que indicar explícitamente las clases que van a ir tanto dentro del media query como fuera de ella
En vez de extender @extend, coloca el código que quieras reproducir dentro de un @mixin
@mixin small-btn-mixin() {
padding: 5px;
&:hover {
background-color: white;
color:black;
}
}
@media (max-width: 768px) {
button {
@include small-btn-mixin();
}
}
HTML
<nav>xxxxxx</nav>
Javascript
//////////////////////////////////////////////
//===> Ocultar el menú en scrolldown
var confScrolldown = {
//Número de scroll en pixels donde se comienza a ocultar el menú
offsetOcultar: 20,
};
var $navbarSuperior = $("nav");
var offsetActualParaOcultar = 0;
var prevScrollpos = $(window).scrollTop();
var alturaMenuNav = $navbarSuperior.outerHeight();
$(window).scroll(function() {
var currentScrollPos = $(window).scrollTop();
if (prevScrollpos > currentScrollPos) {
//$navbarSuperior.css("top",'0'); //<=sin animación
$navbarSuperior.stop().animate({ top: 0 }, 100);
offsetActualParaOcultar = 0;
} else {
//$navbarSuperior.css("top",'-'+alturaMenuNav+'px'); //<=sin animación
offsetActualParaOcultar++;
if(offsetActualParaOcultar>=confScrolldown.offsetOcultar)
{
//Sólo realizará la animación si ha scrolleado los píxeles indicados en confScrolldown.offsetOcultar
$navbarSuperior.stop().animate({ top: -alturaMenuNav }, 800);
}
}
prevScrollpos = currentScrollPos;
});
Referencias:
https://codepen.io/JTParrett/pen/CAglw
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll
HTML
<div class="barra-porcentaje-scroll"></div>
Javascript
$(window).scroll(function() {
//Calcular el porcentaje que el usuario ha scrolleado y mostrarlo en la barrita superior
var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
$('.barra-porcentaje-scroll').css('width', scrollPercent +"%" );
});
CSS
.barra-porcentaje-scroll
{
height: 5px;
background-color: #009ACF;
width: 0px;
z-index: 2;
position: fixed;
left: 0;
}
Considerar que manipular el rebote es cambiar sólo la forma de visualizar los datos de analytics. No cambiará los parámetros de posicionamiento, pero sí nos adaptará el análisis en base a nuestras preferencias sobre cómo queremos que actúen nuestros usuarios.