Positie van winkelwage icontje veranderen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Peet Peterse

Peet Peterse

23/09/2019 11:05:05
Quote Anchor link
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 **** */

}
Gewijzigd op 23/09/2019 11:06:12 door Peet Peterse
 
PHP hulp

PHP hulp

14/11/2019 04:18:18
 
- Ariën -
Beheerder

- Ariën -

23/09/2019 11:13:03
Quote Anchor link
Kijk eens naar de CSS fixed waarde van de position-property?
 
Peet Peterse

Peet Peterse

23/09/2019 11:14:40
Quote Anchor link
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;
}
Gewijzigd op 23/09/2019 11:18:04 door Peet Peterse
 
- Ariën -
Beheerder

- Ariën -

23/09/2019 11:18:25
Quote Anchor link
https://www.w3schools.com/css/css_positioning.asp en kijk naar 'fixed'. Dan blijft het element zichtbaar.
Gewijzigd op 23/09/2019 11:22:24 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

23/09/2019 13:00:02
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.