Fix elements on scroll

Dear Kriesi,

A client requested a content element (a tab element in this case) to scroll along with the user and stay at a fixed position until the footer is reached, after which it is released.

I think I managed to get the job done using the Code Block element that I put underneath the target element. That Code Block then guides it on its way with some JavaScript. My question is though: am I smashing any Enfold windows here? I wrote the code as safe as I could but you never know what you might break. Is it stable enough?

Also, I noticed I can’t make jQuery calls in the Code Block elements. I do believe Enfold includes it, right? I could only use it when I fetched jQuery again within the Code Block. That seemed messy and bloaty though, so I decided to skip jQuery for this. But is there a way it can be used in Code Block elements easily? I do miss the brevity and I read window.onload is not as reliable as $(document).ready().

A working example:
http://www.tweekeertwee.nl/handleidingen/scrolling-tabs/

The code I used:

// Done without jQuery

<script type="text/javascript">
var namespaceScrollShield = { // Avoid any type of name conflicts

execution: function(){
  window.onload = function(){ // Must be done after all is loaded, otherwise the .main_color height might be off
    var childElement = document.getElementsByClassName("tabcontainer")[0];
    var parentElement = document.getElementsByClassName("main_color")[0];
    var header = document.getElementById("header");
    var difference = parentElement.offsetHeight - header.offsetHeight - childElement.offsetHeight;

    document.addEventListener("scroll", function(){ // Stack it with other possible scroll handlers
      var doc = document.documentElement, body = document.body;
      var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);

      var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

      if(x > 767) // Only do this for devices with a width > 767
      {
        if(top < difference)
        {
          // Messing around with fixed/relative seemed to wreak havoc so I stuck to repositioning
          childElement.style.top = top + "px";
        }
        else
        {
          childElement.style.top = difference + "px";
        }
      } // End if
    }); // End addEventListener
  } // End onload
} // End execution
}; // End namespaceScrollShield

namespaceScrollShield.execution();

</script>

Kind regards,
Lucas van Heerikhuizen

• This topic was modified 10 years, 4 months ago by Lucas van Heerikhuizen. Reason: Code was spread out too much