28172 sujets

CSS et mise en forme, CSS3

Stopper une div sur le footer lors d'un suivi écran

Bonjour à tous,

J'ai mis en place un javascript avec un suivi d'écran sur mon blog http://www.lauraoupas.com toutefois quand je scrolle vers le bas, mon div vient passer au dessus de mon footer. Pourriez-vous m'aider à bloquer ce div ?

Merci pour votre retour,
Jonathan
Salut Jonathan,

Tu parles bien du bloc de pubs à droite, c'est ça ?

Dans ce cas, il faudrait, détecter le top de ton footer Instagram (#footer-intagram), si ce top est plus petit que la hauteur de tes pubs, tu positionnes ce bloc en absolute avec un bottom: 0; dans ton #main (que tu positionnes lui en relative). D'ailleurs, le bloc se positionne assez mal au scroll.
As-tu la main intégralement sur ce script ?

Sinon, y'a un truc qui est un peu bizarre, c'est une action sur une div (#menu-scroll) : l'opacity n'arrête pas de tourner et c'est pas terrible ça ralenti ton système, et ça saccade les clients un peu lents.
Il faudrait savoir d'où ça vient.
Modifié par MatthieuR (07 Apr 2016 - 13:07)
Bonjour Matthieu,

Merci pour ton aide. C'est bien cela, je veux que mon bloc pub s'arrête au niveau des images instagram afin qui ne chevauche celui-ci. Est-ce qu'il s'agit de modification CSS ou Javascript ? J'ai accès au FTP donc aucun problème pour faire les modifications. C'est un script que j'avais trouvé sur le net.

Concernant l'opacité qui tourne en boucle c'est vraiment étrange car dans mon CSS ou javascript, je n'appelle pas cela.

Encore merci pour ton aide,
Jonathan
J'ai fait un pen rapide pour te montrer un peu le principe (avec jQuery).
Des choses sont à optimiser, surtout la position initiale du block de pubs, il faudrait voir quand on a scrollé et que l'on recharge la page, quel comportement ça prend.

Voici le pen : http://codepen.io/korell/pen/KzZgJV

Le JS :
//initialisation de quelques variables
var block_pub = {};
    block_pub.init_top = $('.pubs').offset().top;
    block_pub.height = $('.pubs').outerHeight();
$('.pubs_height').text(block_pub.height);
//appel de la fonction sur l'événement "scroll"
$(document).scroll( stickAds );
//on déclenche une fois le scroll au chargement de la page
$(document).trigger('scroll');

function stickAds(){
  
  //on récupère la position du bloc '.pubs'
  var block_pub.top = $('.pubs').offset().top;
  //détection de la position du scroll
  var scroll_top = $(window).scrollTop();
  var footer_insta_top = $('#footer-instagram').offset().top - scroll_top;
  
    //pour infos
    $('.footer_insta_top').text(footer_insta_top);
    $('.pubs_top').text(block_pub.top);
    $('.scroll_top').text(scroll_top);
  
  //a optimiser, mais le principe est là
  if(block_pub.top <= scroll_top && scroll_top > block_pub.init_top && footer_insta_top >= block_pub.height){
    $('.pubs').addClass('ontop').removeClass('onbottom');
  }else if(footer_insta_top < block_pub.height){
    $('.pubs').addClass('onbottom').removeClass('ontop');
  }else{
    $('.pubs').removeClass('ontop').removeClass('onbottom');
  }
  
}

N'hésite pas à demander des éclaircissements.
Bonjour Matthieu,

Merci pour ce superbe retour ! C'est exactement ce que je veux faire selon ton pen.
Toutefois j'ai bien ajouté ta fonction dans mon fichier functions.js et ajouter le CSS puis ajouter class="pubs" sur mon bloc mais rien ne se passe Smiley confus

Ne penses-tu pas qu'il serait plus facile par exemple de ce dire que la taille du footer et fixe et qu'on pourrait bloquer le bloc pub à 300px du bas ?

Merci pour ton aide encore une fois !
Modifié par jnceweb (11 Apr 2016 - 10:33)
Oui, on pourrait fixer la hauteur du footer mais il n'y a pas de difficulté sur le script à ce niveau-là donc mieux vaut laisser la possibilité d'avoir un footer avec une hauteur inconnue.

Sinon, je ne sais pas pourquoi le script ne fonctionne pas chez toi :
- as-tu des erreurs dans ta console ?
- le script requiert jQuery, l'as-tu chargé correctement ?

En fait, je viens de voir ton site en ligne et tu as une erreur : "Uncaught TypeError: Cannot read property 'top' of undefined" functions.js:71 : la fonction arrive donc avant que le block ".pubs" ne soit dans le DOM.
Il faut donc que tu appelles cette fonction après l'arrivée des pubs, soit dans un callback, soit de manière synchrone après le chargement des pubs.
Comment sont chargées ces pubs ?
Bonjour Matthieu,

Merci pour ton retour. Toutefois je ne suis pas certain de tout comprendre. Mon niveau est moyen en JS.

Toutes les fonctions sont déclarés dans un fichier JS que j'appelle entre les balises header. et le JQuery qui est appelé avant visiblement.

Concernant l'affichage des pubs, il s'agit d'affiliation donc je récupère le code sur les plateformes d'affi que je colle dans mon sidebar.php. Il n'y a pas d'autres codes pour appeler les pubs.

Qu'est ce qu'il faut que je fasse... Smiley biggrin

Merci beaucoup,
Jonathan
jnceweb a écrit :

Toutes les fonctions sont déclarés dans un fichier JS que j'appelle entre les balises header


Je te coupe je suis un peu tatillon et c'est pour une meilleur compréhension, ce que tu appels dans le <head></head> c'est le fichier contenant le javascript, les méthodes quant à elles sont appelées dans des événements.

et puis ton script de se déclenche pas car tu as une erreur sur cette ligne : 

block_pub.init_top = $('.pubs').offset().top;


je pense que c'est parce que quand tu fais un .top, l’élément n'existe pas encore, du coup il fait un appel de fonction sur quelque que chose qui vaut "null"... donc il stop. ceci surement peut être regler avec un document.READY
Modifié par JENCAL (13 Apr 2016 - 14:11)
Bonjour,

Comme l'a précisé JENCAL, le code ne doit pas fonctionner parce qu'au moment il est appelé, le bloc.pubs ne doit pas encore exister, alors essaie d'abord de simplement mettre ces lignes :
//************** NOUVELLE FONCTION POUR LE SCROLL DE LA PUB *****************//
//initialisation de quelques variables
var block_pub = {};
block_pub.init_top = $('.pubs').offset().top;
block_pub.height = $('.pubs').outerHeight();
$('.pubs_height').text(block_pub.height);
//appel de la fonction sur l'événement "scroll"
$(document).scroll(stickAds);
//on déclenche une fois le scroll au chargement de la page
$(document).trigger('scroll');

... dans le document ready un peu plus haut :
$(document).ready(function(){
  // ...
  // tes nouvelles lignes de code
})


Si ça ne fonctionne pas, il faudra encore retarder le code, soit il existe un callback (non ce n'est pas un groupe de musique), soit il faudra juste mettre ça dans un timer.

EDIT : je viens de voir que Matthieu l'avait déjà expliqué ça. Smiley biggrin
Modifié par SolidSnake (21 Apr 2016 - 18:52)
gcyrillus a écrit :


avec un petit article suite à une raide recherche http://www.sitepoint.com/css-position-sticky-introduction-polyfills/ ... cela ressemble furieusement à l'effet recherché, non ?

c'est comme la roue, plus besoin de l'inventer Smiley smile

Oui mais pas tout à fait car ce polyfill fixe le block voulu toujours à une position absolue et non par rapport à d'autres block...
jnceweb veut en plus que ce bloc se "redébloque" quand le footer arrive en bas de ce bloc de pubs...

Le souci en fait en plutôt de détecter l'arrivée des pubs (et là c'est pas toutes les 20 min sur TF1, on sait pas quand elles arrivent Smiley biggrin ).

Je ferais un truc avec un setTimeout() en boucle qui teste à chaque passage si il y a le block de pubs ($('.pubs').length > 0) et on sort du setTimeout(); dès qu'on a qqchose.
var bool = false;
(function isPubs(bool){
  if( ! bool){
    setTimeout(function(){
      bool = ($('.pubs').length > 0) ? true : false;
      console.log(bool);
      isPubs(bool);
    }, 100);
  }else{
    //ici ta fonction qui attache l'action au bloc .pubs qui est maintenant disponible
    console.log($('.pubs'));
  }
})()

Tu peux voir sur Codepen un exemple que j'ai fait : http://codepen.io/korell/pen/aNjVvJ
Ouvre ta console supprime la classe .pubs, puis tu la remet !
A toi de jouer !
Merci à tous pour vos retours mais je dois dire que je suis encore un peu perdu avec le code à supprimer où à ajouter...

Pour vous donner un exemple concret, voici un site qui à l'effet escompté : makemylemonade.com

Merci d'avance,
Jonathan
Sujet clos
Aller à