Fix footer at the bottom

Hi, I want to fix the footer at the bottom of the page. I did manage to do that by using CSS bottom:0; z-index: 999;position:fixed; width:100%;

However, it is showing on the intro screen as well. I want it to only show up when top bar shows up. How can I make it go to the bottom when you scroll up all the way to the intro section? The top bar behaves like this, it goes up when you scroll up and comes back when you go the content section.

Are you sure you are talking about Creative template not Creativity?

You are right. I am talking about the creativity template. Let me post this there. Thanks

I have deleted the double post and moved this thread to correct forum.

There is no easy "how to do it" method.
What I would suggest is to use already created code for top bar and jus add a little bit to it... Check this file:

Code: Select all

/templates/gk_creativity/js/gk.scripts.js


and find this section:

Code: Select all

      jQuery(window).scroll(function() {
         
         var intro = jQuery('body').find('.gkIsWrapperFixed');
         var introh = intro.height();
         var pos = jQuery(window).scrollTop();
         
         if(pos >= 100) {
            jQuery('#gkTop').css('top', '0px');
         } else if(pos < 100) {
            jQuery('#gkTop').css('top', '-100px');
         }
         
         if(!navigator.userAgent.match(/msie 8/i) && pos < introh && jQuery(window).width() > 1040) {
            jQuery(intro).find('.figcaption').css('top', Math.floor((1.0 * pos) / 8.0) + "px");
         }
         
         if(IS.length > 0) {
            if(pos > introh) {
               if(IS.css('display') != 'none') {
                  IS.css('display', 'none');
               }
            } else {
               if(IS.css('display') != 'block') {
                  IS.css('display', 'block');
               }
            }
         }
      });


what it does - when you csroll over 100px in your browser it sets inline css of #gkTop element to 0 px (or -100px if the scroll value is less)
those lines does the trick:

Code: Select all

         if(pos >= 100) {
            jQuery('#gkTop').css('top', '0px');
         } else if(pos < 100) {
            jQuery('#gkTop').css('top', '-100px');
         }


To stick and unstick another element you can modify its css the same way, adding another line in if statement. Just use different ID for your footer element.

Perfect !!! Thank you very much. According to your advice. I got the following code which works perfectly.

Code: Select all

      if(pos >= 100) {
            jQuery('#gkTop').css('top', '0px');
                               jQuery('#gkFooter').css('bottom', '0px');
                               
         } else if(pos < 100) {
            jQuery('#gkTop').css('top', '-100px');
                                jQuery('#gkFooter').css('bottom', '-100px');
         }

The only problem is, it doesn't have a nice sliding animation to it. I tried to do

Code: Select all

$('#gkFooter').animate({'bottom': '0px'}, 1000);

but that does not work properly. Could you please advice me on setting that sliding animation to the footer?

Once again, thank you very much for the help.

The animation comes from css:

Code: Select all

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;


Add those declarations to your #gkFooter element (please edit: /templates/gk_creativity/css/override.css and add at its end):

Code: Select all

#gkFooter {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}


Remember to enable "CSS override" in template settings - advanced section.

Perfect !!! Thank you very much for the great help. Just a quick question, if I enable "CSS override", it wont have any side effect on the site, right? I believe it wont but just confirming

override.css is a special file where you can place all your css overrides, and if someday you will want to update the template - if it goes to css - this will be the only file you need to copy and insert after update. Of course if you have changed anything in other files (css, php files) then you will need to merge those changes manually.