Fixer une div puis la faire disparaitre au scroll

On va partir d’une image:

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.

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;

      }

    }

  });

});

01/05/2015 Mis à jour le 20/07/2015 Par Copier coller | Dans jQuery