JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="https://raw.githubusercontent.com/somewebmedia/hc-sticky/master/jquery.hc-sticky.min.js"></script>
<div class="header"></div>
<div class="wrapper sticky-wrapper">
    <div>
        <div class="sticky">
            <div class="sidebar">
                Sidebar
            </div>
        </div>
    </div>
    <div>
        <div class="content">
            Content
        </div>
    </div>
</div>
<div class="footer"></div>

CSS

.wrapper {padding:10px; background:tomato; overflow: hidden;}
.wrapper > div {float: left; width:70%;}
.wrapper > div:first-child {width: 30%;}

    .content {padding:10px; background:#FFF; height:800px;}
    .sidebar {padding:10px; height:300px; background:firebrick;}

.header,
.footer {height:300px; background:beige;}

JavaScript

// Télécharger le script :
// https://github.com/somewebmedia/hc-sticky

// Il n'y a aucun CSS à ajouter.
// Il te faut un conteneur de référence (ici `.sticky-wrapper`) qui va indiquer les limites dans lesquels doit se déplacer ton élément "fixe".
// La seule chose à respecter au niveau du CSS, c'est de ne pas appliquer de style sur la classe `.sticky` (celle qui de l'élément qui va bouger).
// Si tu dois styler le contenu, utilise un élément enfant.
// Par exemple si tu souhaites que ton élément ne soit pas collé en haut de l'écran, tu peux ajouter un `margin-top` sur l'élément enfant (ici, ce serait `.sidebar`), mais jamais directement sur `.sticky`

var $window = $(window),
	$sticky = $('.sticky');
	
	//initialisation
	$sticky.hcSticky({stickTo:".sticky-wrapper"});

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize < 600) {
            //Si la fenêtre est plus petite que 600px, on stop le script
            $sticky.hcSticky('off');
        } else {
        	// Si la fenêtre change de taille et passe au dessus de 600px à nouveau, on relance le script
            $sticky.hcSticky('on');
        }
    }
// Execution au chargement de la page (pour savoir la taille de l'écran)
checkWidth();
// Vérifier la taille de l'écran lors du redimensionnement
$(window).resize(checkWidth);