Reto #1: navbar and modal disappear with scroll

[juandc]

Hey!

Con este Issue quiero proponerte que mejores el scroll de a tienda en React.

La navbar desaparece cuando hacemos scroll, pero desde allí es que debemos filtrar as categorías (en el futuro), por lo que es importante tenerlo siempre que sea posible disponible, incluso cuando hacemos scroll.

Exactamente lo mismo con el modal de My Order. Cuando hacemos scroll se queda arriba junto al menú.

Resolver este issue es un poco más complicado que darle position fixed a ambos componentes, pero con lo que aprendiste de CSS en los cursos de frontend developer serás más que capáz de resolverlo. 💪

[devkev53]

Primer reto, ubicar el navbar y el aside fijox al hacer scroll
// en el Header.sass

nav {
	display: flex;
	justify-content: space-between;
	padding: 0 24px;
	border-bottom: 1px solid var(--very-light-pink);
	width: calc(100% - 48px);
	top: 0;
	position: fixed;
	background-color: #fff;
}
// en el MyOrder.sass
.MyOrder {
	width: 360px;
	padding: 24px;
	box-sizing: border-box;
	position: absolute;
	right: -360px;
	background-color: white;
	top: 60px;
	bottom: 0;
	border-radius: 6px;
	border: 1px solid var(--very-light-pink);
	position: fixed;
	transition: 1s ease;
	animation: swipeLeft 1s ease forwards;
}
@keyframes swipeLeft {
	100% {transform: translateX(-360px);}
}

[raycris]

En el nav de Header.scss debemos, aqui algo muy importante es la posicion sticky que nos indica que debe de quedarse pegado y el top: 0. que nos indica que no queremos ningun espacio en el top

nav {
	top: 0;
  width: calc(100% - 48px);
  display: flex;
  padding: 0 24px;
	position: sticky;
  border-bottom: 1px solid var(--very-light-pink);
  justify-content: space-between;
	background-color: #fff;
}

en el MyOrders.scss solo fue agregarrle el position: fixed; para que todo pueda funcionar correctamente.

.MyOrder {
  top: 60px;
  right: 0;
  width: 360px;
  bottom: 0px;
  border: 1px solid var(--very-light-pink);
  padding: 24px;
  position: fixed;
  animation: swipeLeft 0.26s ease;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: white;
}

Tambien algo adicional que me pude dar cuenta es el archivo de meno, donde despliega que podemos hacer singin y logout tambien a esa clase de scss le hicimos cambios y fue colocarle el background-color: white; a la clase de .menu. porque antes estaba transparente

.Menu {
  top: 60px;
  right: 50px;
  width: 100px;
  height: auto;
  border: 1px solid var(--very-light-pink);
  padding: 20px 20px 0 20px;
  position: absolute;
  border-radius: 6px;
  background-color: white;
}

[christian-olivers]

mi codificación fue la siguiente
en header el elemento nav quedo de la siguiente manera, y así quedarse fijo en la parte superior
nav {
. . .
position: fixed;
top: 0;
width: calc(100% - 48px);
background-color: var(--white);
}

en mi orden agregue una transición para que se vea mas amigable y el elemento mi orden se muestre de derecha a izquierda
.MyOrder {
. . .
animation: swipeLeft .40s;
overflow-y: auto;
height: 360px;
}
. . .
@Keyframes swipeLeft {
0% {
width: 0;
}
100% {
width: 360px;
}
}
y por ultimo corregí el margen superior de las cartas pues se lo comía el header

.ProductList {
. . .
margin: 5em 0 0 0;
}

[wldrocha]

Yo use position:sticky para que se quedara fijo y el top: 0

[julianf-dev]

Buenos días.

Al igual que muchos compañeros para el nav agregue la position fixed más un width que calculara el ancho ya que el 100% generaba un scrool horizontal.

nav {
	display: flex;
	justify-content: space-between;
	padding: 0 24px;
	border-bottom: 1px solid var(--very-light-pink);
	background-color: var(--white);
	width: calc(100% - 48px);
	position: fixed;
	top: 0;
}

Para mi order lo que agregue fue un height de 90vh junto con un position absolute para que ocupara el resto de la pantalla adicional le quite el scrolll que generaba cuando agregaba varias orders

También use la propiedade animación que dejaron los compañeros la verdad no se mucho de animaciónes pero quedo bacano jeje :3

Hay mucho por mejorar, uno de esto creo que seria que el checkout se quede fijo en la parte inferior y el scroll únicamente sea de los items.

.MyOrder {
	width: 360px;
	position: absolute;
	padding: 24px;
	box-sizing: border-box;
	right: 0;
	background-color: var(--white);
	top: 60px;
	bottom: 0;
	border-radius: 6px;
	border: 1px solid var(--very-light-pink);
	height: 90vh;
	overflow: auto;
	animation: swipeLeft .40s;
}

@keyframes swipeLeft {
	100% {transform: translateX(-260px);}
}

.MyOrder::-webkit-scrollbar{
	display: none;
}

[AndresMpa]

Es tan simple como agregar estas 4 líneas en la etiqueta

nav {
   ///
   position: fixed;
   padding: 0 2%;
   width: 96%;
   top: 0;
}

[Guerrita]

Solo agregue las ultimas 3 lineas de codigo a los estilos de nav
nav { display: flex; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); position: sticky; top: 0; background-color: #fff; }

[IsaiasZc]

La solucion que tuve fue cambiar el position de mi nav dentro del archivo Header.scss:

nav {
  ...
  position: sticky;
  top: 0;
  ...
}

[alejandroch1202]

A mi me funcionó agregarlo position fixed al nav, con su backgroud white tomando todo el width. Y al div de abajo le agregué un margin top.