élément flottant selon la scrollbar

[[email protected]]

Bonjour,

 

J'aimerais créer un élément qui reste affiché à l'écran en permanence même lorsqu'on scroll pour mes pages produits (exemple : https://portemetal.pswebshop.com/fr/home/3-porte-firestop-1-vantail.html )

 

Je pense y inclure Mon PRIX <div class="price {if $productPriceWithoutReduction > $productPrice}reducer_pr{/if}"> et mon PANIER : <div class="box-cart-bottom {if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || (isset($restricted_country_mode) && $restricted_country_mode) || $PS_CATALOG_MODE} unvisible {/if}">

 

Ma question pour le faire est : devrais-je mettre en place du javascript sur mon product.tpl ? ou est-t'il possible de le faire seulement avec du html et créer un css pour mes 2 balises DIV ?

 

Exemple d'essai raté:

 

Dans mon Global.css (Product.css serait plus approprié ?)

#price {

position: fixed;

}

 

Dans product.tpl (ou product.js ?) :

 

var positionElementInPage = $('#price').offset().top;

$(window).scroll(

function() {

if ($(window).scrollTop() >= positionElementInPage) {

// fixed

$('#price').addClass("floatable");

} else {

// relative

$('#price').removeClass("floatable");

}

}

);

 

 

Je pense que certains d'entre vous y ont déjà pensé mais je n'ai pas encore trouver d'exemple sur Prestashop.

Merci et bonne journée !