Fixer une div puis la faire disparaitre au scroll

Fixer une div puis la faire disparaitre au scroll

On va partir d’une image:

proweb

Sur un site, j’ai un bouton ‘je veux en savoir plus sur cette offre » qui traine quelque part en bas de la page.Le but, comme sur l’image ci dessus est de placer cet bouton en position fixe, pour qu’il apparaisse des l’ouverture de la page, en bas de l’écran et suive le scroll jusqu’a son emplacement original.

En plus, on pourra mettre une ancre sur le bouton pour qu’au clic, il aille directement dans la partie concernée.

proweb

J’ai mon bouton quelque part sur  la page: ici dans le href je place mon ancre, c’est à dire le signe # suivi de nom de la div vers laquelle je veux pointer.Le formulaire, au dessus duquel normalement il y a le bouton, a une id= »form ».

    <a class="button_bottom_link" href="#form">Je veux en savoir + sur cette offre</a>

Ce bouton en position absolute ou relative au départ,je le passe en position fixed  et je m’arrange pour qu’il se colle en bas de l’écran, comme sur l’image:

.button_bottom_link { position: fixed; bottom: 15px; left: 50%; background-color: #007fc3; padding: 12px 24px; color: white; font-family: "NeoSansStdLight"; font-size: 2em; border-radius: 3px; margin-left: -178px; }
.button_bottom_link:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 15px 13px 0 13px; border-color: #007fc3 transparent transparent transparent; position: absolute; bottom: -15px; left: 50%; margin-left: -13px; }

Mon bouton en position fixed, reste donc fixe en bas de l’écran.Maintenant, pour le faire arreter à son emplacement initial, on fait en sorte qu’arrivé au bon endroit, on lui enlève la position fixed pour lui rajouter une position absolute.

jQuery("document").ready(function($){
    
    var nav = $('.button_bottom_link');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1200) {
            nav.addClass("nav");
        } else {
            nav.removeClass("nav");
        }
    });
 
});

Je rajoute une class nav dans laquelle je dis que la position repasse en absolute:

nav{  position: absolute; bottom: 15px; left: 50%; background-color: #007fc3; padding: 12px 24px; color: white; font-family: "NeoSansStdLight"; font-size: 2em; border-radius: 3px; margin-left: -178px; }

Pour terminer, un bon gros copier coller pour avoir un effet smooth au scrool, visuellement plus sympa:

jQuery("document").ready(function($){
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

6 commentaires sur “Fixer une div puis la faire disparaitre au scroll

  1. David

    Bonjour

    Je ne sais pas si ce billet est vieux ou non mais je me risque à une question.

    Ce sont les deux fenêtres JQuery qui me pose problème… de débutant. Je dois faire quoi avec au fait ? Leur contenu semble différent. Je dois créer deux fichiers JS? Puis les appeler à partir d’un script dans le ? Pour le reste ça va, tout fonctionne avec le css.

  2. David

    Pardon il manque un bout dans mon plus récent commentaire…

    puis je dois les appeler à partir d’un script dans le HEAD ?

  3. copier coller Auteur de l'article

    Hello! en principe il faut les mettre à la suite dans le même fichier js. La deuxième fonction jquery est une fonction qu’on retrouve sur de nombreux topics sur stackoverflow et qui permettent d’avoir un scroll plus fluide. Une version plus simple est visible ici

  4. David

    merci ! Il me manquait aussi un bout de code dans le css (un display: none pour le nav) j’ai réussi à le régler. Mais comme mes pages ne sont pas toutes de la même longueur (j’utilise votre bouton pour indiquer une critique disponible un peu plus bas dans nos pages), le bouton ne s’enlève que si on scroll plus bas que la partie où je veux qu’il disparaisse. Je me demande, est-ce possible de faire en sorte d’ajouter un X ou un « Fermer » pour faire disparaitre le div bouton ? Merci !

  5. David

    J’ai fini par trouver la meilleure solution ! merci pour cette belle page !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.