Positie van winkelwage icontje veranderen

Door Peet Peterse op 23-09-2019 11:05 gewijzigd op 23-09-2019 11:06

3.428 views

Beste mensen,
Op mijn webshop heb ik van boven naar beneden:
1- top bar (logo + zoek veld + winkelwagentje)
2- menu bar (waar de menu's zichtbaar zijn)
3- slid en atrikel overzicht etc....
4- etc....

wat wil ik?

Ik heb zo geregeld als je naar beneden scrolt de top baar verdwijnt en naar boven schuift en de menu baar aan de boven kant van de scherm gepositioneerd wordt, zodra weer naar beneden scrolt komt de top bar te verschijn.

Ik wil als ik naar boven scrolt de logo en zoek veld naar boven scrolt en niet meer zichtbaar is (zoals het nu het geval is) maar wil de winkelwagen helemaal aan de rechterzijde van de menu bar laten zien!!! Is dat mogelijk en hoe doe je dat.

Mijn vraag is hoe kun je zoiets doen?

Hieronder hoe de schrol op dit moment werkt.

Dank alvast voor de moeite.

.ps-sticky-header.scroll .martoni-topbar {
margin-bottom: -50px;
margin-top: -80px;

}

=========================================

Ik dacht met zo'n regel code:

.ps-sticky-header.scroll .martoni-cart
{

/* ***** wat moet ik hier neerzetten **** */

}

- Ariën -

23-09-2019 11:13

Kijk eens naar de CSS fixed waarde van de position-property?

P Peet Peterse

23-09-2019 11:14 gewijzigd op 23-09-2019 11:18

hummm, kunt u dit ook in Dummy taal uitleggen?

Ergens boven aan de css zie ik deze:

.martoni-cart-amount {
position: absolute;
top: -5px;
left: 23px;
background: #f97807 !important;
border-radius: 15px;
width: 30px;
height: 30px;
padding: 4px 0 0 1px;
text-align: center;
color: #fff;
display: inline-block;
}

- Ariën -

23-09-2019 11:18 gewijzigd op 23-09-2019 11:22

https://www.w3schools.com/css/css_positioning.asp en kijk naar 'fixed'. Dan blijft het element zichtbaar.

Thomas van den Heuvel

23-09-2019 13:00

Mja, maar je winkelwagen icoon zit in je top bar. Tijdens het scrollen plakt je menubar aan de bovenrand. En daar wil je je winkelwagen (icoon) dan in stoppen. Afhankelijk van je scrollpositie wil je het icoon op verschillende plekken tonen. Ik weet niet of dit alleen met CSS te bolwerken is.

Wat je zou kunnen doen is inderdaad het winkelwagen icoon een vaste positie geven in een gebied van je menubar waar ruimte is (die je dus ook hiervoor dient te reserveren, bijvoorbeeld met een padding of margin ofzo).

Realiseer je je tegelijkertijd dat daarmee het winkelwagen icoon niet automagisch is verhuisd naar je menubar, deze zit nog steeds in je top bar maar krijgt bij het scrollen een andere positie die niet afhankelijk is van de "flow" / structuur van je pagina. Met een vaste (fixed) positie haal je een element met deze positionering ook effectief uit deze "flow". Mogelijk zou je dus ook rekening moeten houden met de verschillende apparaten en bijbehorende resoluties waarmee jouw site bekeken kan worden.

Je zou natuurlijk ook kunnen opteren voor een variant waarbij zowel je top bar alsook je menubar een winkelwagen icoon bevatten (die mogelijk van uiterlijk en afmeting kunnen verschillen) waarbij er maar één tegelijkertijd zichtbaar is, afhankelijk van of je bovenaan de pagina zit of niet.

Ik denk dat je in beide gevallen wel een snippet JavaScript nodig hebt om dit aan te kunnen sturen.

Reageren

Inloggen om te reageren