fbpx

GeneratePress sticky widget

Op Moosty.nl heb ik één widget die met je mee scrolt op lange pagina’s.

Dit noem je een sticky widget.

Door dit stukje CSS code via Customizer > Extra CSS erin te zetten kun je dit bewerkstelligen:

@media (min-width: 769px) {
    .right-sidebar .site-content {
        display: flex;
    }

    .inside-right-sidebar {
        height: 100%;
    }

    #text-6 {
        position: -webkit-sticky;
        position: sticky;
        top: 50px;
        z-index: 100;
    }
}

In de code zie je #text-6 staan. Dit verwijst naar de naam van de widget waarvan je wilt dat die mee scrolt.

De naam van die widget kun je eenvoudig in Google Chrome vinden met Developer tools.

Klik met je rechtermuisknop op de widget en kies voor Inspect:

Als je daarop hebt geklikt zie je onderstaande verschijnen:

Vlak boven waar het gedeelte blauw geselecteerd is, zie je text-6 staan.

Bij jou staat er misschien text-1 of text-10.

Vervang het met het nummer wat ie bij jou aangeeft in de code hierboven.

Zolang je pagina lang genoeg is, zul je zien dat de widget met je mee naar beneden beweegt.

Leuk toch?!