0
Welcome Guest! Login
0 items Join Now

Sticky sidebar overlaps to the footer?

    • kriru's Avatar
    • kriru
    • Hero Rocketeer
    • Posts: 351
    • Thanks: 0

    Sticky sidebar overlaps to the footer?

    Posted 8 years 10 months ago
    • I have Created custom sticky sidebar for ADS, it works but there is an issue. when I scroll it to the bottom, it overlaps on the footer. pls check. - screencast.com/t/oEjcrbocB05C
      <style>
      .sticky {
        position: relative;
        top: 0; }
      </style>
      <script>
      var stickySidebar = $('.sticky');
      
      if (stickySidebar.length > 0) { 
        var stickyHeight = stickySidebar.height(),
            sidebarTop = stickySidebar.offset().top;
      }
      
      // on scroll move the sidebar
      $(window).scroll(function () {
        if (stickySidebar.length > 0) { 
          var scrollTop = $(window).scrollTop();
                  
          if (sidebarTop < scrollTop) {
            stickySidebar.css('top', scrollTop - sidebarTop);
      
            // stop the sticky sidebar at the footer to avoid overlapping
            var sidebarBottom = stickySidebar.offset().top + stickyHeight,
                stickyStop = $('.main-content').offset().top + $('.main-content').height();
            if (stickyStop < sidebarBottom) {
              var stopPosition = $('.main-content').height() - stickyHeight;
              stickySidebar.css('top', stopPosition);
            }
          }
          else {
            stickySidebar.css('top', '0');
          } 
        }
      });
      
      $(window).resize(function () {
        if (stickySidebar.length > 0) { 
          stickyHeight = stickySidebar.height();
        }
      });
      </script>

      Check for site url is - www.test2.guru99.com/java-tutorial.html
      Please Help Me !
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Sticky sidebar overlaps to the footer?

    Posted 8 years 10 months ago
    • Use this code...
      .sticky {
       z-index: 99;
      }

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"




      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.079 seconds