Looking to create a fixed module on the sidebar

Hello, I'm looking to use up the blank space in the right sidebar once a users scrolls down towards the bottom. I'd like to have a module that's just fixed in the side bar as a user scrolls down. There are some extensions that I've tried to accomplish this but I can't get them to work the way I want. I figure I can just make the main page "gkmain" position: relative; and have the sidebar component fixed? Is this the right way to go about doing that, and am I targeting the correct elements?

example page: here

Hi,

Just try my solution: create your ads module and assign it to an existed module position in the template. Set a suffix class for that module, let's say "myadsmodule", then add this code to CSS Override:

Code: Select all

.myadsmodule{
position: fixed;
top: 0;
right: 0;
}


Then you will have the module stuck at right top position.

thank you for your response. Yes, that works but the fixed module scrolls through my other content. And when when viewing on different size screens the position gets changed depending on screen size. I'm looking to make something similar to this --> http://css-tricks.com/examples/ScrollingSidebar/css.php where the module is fixed relative to the main content I guess...so that the advertisement stops floating at the bottom of the "quick menu" and at the top of the footer module. thank you for your help by the way, i appreciate it. Here is what my site looks like with your advertisement example --> http://thecollegecure.com/index.php/gui ... f-learning

Hi,

I see, if so we would need to use javascript to manage that, this is an example, try adding it to bottom of file \templates\gk_esport\layouts\blocks\head.php

Code: Select all

<script>
function gkGetScrollY() {
    var scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;        
    } else if( document.body &&  document.body.scrollTop ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;        
    } else if( document.documentElement &&  document.documentElement.scrollTop ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;        
    }
    return scrOfY;
}
window.addEvent('domready', function() {
var ads = document.id("gkRightBottom");
var adstop = ads.getTop();
window.addEvent('scroll', function(e){
      topscr = gkGetScrollY();
      if(topscr > adstop){         
         
         ads.setStyles({'position':'fixed','top':0});         
      }
   });   
});
</script>


What this code will do is that, when you scroll the page to position of your ads module, it will set the module's position to "fixed".

Hi,

I would also like to created a fixed module on the sidebar, in order to have the sub-menu at "fixed" possition, without overlaping at footer or loose the responsive design layout.

The tempalte i am using is cloudhost.

Could you please provide some info in that?

Thanks