Store
Community Documentation

v3 Knowledgebase

Fixed your Ad to the top when scroll down

You may see in many sites including Facebook that when scrolling down to the bottom of the page the Advertising panels are scrolled up and fixed at the top. They won't be gone from the page.

To do this you need to create some javascript (ajax jQuery) to detect the page scrolling, and when its margin is near the top just change the style to fixed the position.


Here are the simple instructions:
1. Add Style sheet to your theme custom.css
From AdminCP -> Extension --> Manage Theme --> [click at your theme] --> Manage style --> Edit CSS--> Global CSS--> custom.css
Then add:
/*Ad to fix */
.ad_space{
margin-left:0;
display:block;
position:relative;
max-width:250px;
z-index:1000;
}
.ad_space.fixed{
position: fixed;
top:100px;
max-width:250px;
z-index:1000;
}
2. You need to add javascript to your theme. You can also just add to existing javascript file at static/jscript/custom.js, if it is not existed you may need to add this file, and assigned to your theme.
For Nebula: /theme/frontend/nebula/style/jscript/custom.js
Or simply modify the template.hmtl.php then add below code to template just before the </body> tag. But you need to put them inside {literal}<javascript type="text/javascript"> CODE HERE</javascript> {/literal}

Then just add this code into the file, maybe at the end of the file:
(function($) {
$(document).ready(function () {
if ($('.ad_space').length){
var smtop = $('.ad_space').offset().top - parseFloat($('.ad_space').css('margin-top').replace(/auto/, 0)); //
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop() +90; // should be 0
// whether that's below the form
if (y >= smtop) {
// if so, ad the fixed class
$('.ad_space').addClass('fixed');
} else {
// otherwise remove it
$('.ad_space').removeClass('fixed');
}
});// end of window scroll
}
}); // end of windows ready

})(jQuery);

Now just done.. you may need to refresh and clean up the cache both at browser and server to make sure the new css and javascript is loaded.