sábado, 3 de setembro de 2016

Sticky widget stop on footer blogger

sticky-widget-stop-on-footer


Sticky widget stop on footer Blogger é um dos widgets que funciona perfeitamente todos os créditos a stackoverflow e kompiajaib isso é para os amantes dessa função que traz algo a mais a apresentar pairando pairando sobre footer isso é muito inovador e esta em alta crescente nos blogs profissionais por isso resolvemos compartilhar.

Como instalar widget sticky stop on footer blogger 


Faça login no Blogger então va no menu modelo editar HTML/JavaScript 
com as teclas combinadas CTRL+F busque por </body> e logo acima disso copie e cole 
o seguinte código: 

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
//]]>
</script>

Nota: modifique realçado em amarelo #sticky pelo widget que deseja e #footer não modifique é onde ele vai parar.


Caso deseje dar um tratamento diferenciado ao Widget como modificar a cor de fundo podemos adicionar uma classe para o widget definir com css como o modelo abaixo veja o demo

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("intro");
          }
          else {
             el.css('position','static');
             el.removeClass("intro");
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          el.removeClass("intro");
          }
        });
   }
});
//]]>
</script>

Salve e pronto.

Fonte  http://stackoverflow.com/questions/10669175/stop-floating-sticky-sidebar-div-at-footer-almost-working


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner