Back To Programming / Scripting / Coding Forum

Fixed element scroll limit

  • mista-two-k
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Oct 15, 2007
  • Posts: 57
  • Status: Offline

Post November 15th, 2011, 6:48 am

Hey,

I have a fixed element that always stays at a fixed position even when scrolling up/down the page. However, my website has a pretty big footer and I want to avoid that element to scroll over the footer. How can I make it so that the fixed element stops from being fixed at a specific position?

Hope you guys understand what I mean.

Thanks :)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 15th, 2011, 6:48 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8923
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post November 15th, 2011, 4:01 pm

You will have to do something similar to what Ozzu does. You will notice that at times the menu on the right is a fixed element if the page is long enough, but as soon as the footer approaches it turns back to not being fixed to not scroll over the footer. The only way to achieve this is using Javascript. In the case of Ozzu we use jQuery to make this easier. Basically you just need to custom write some code to detect when the fixed element should be fixed and when it should not be fixed.

There are probably numerous ways to do this, but how we currently do this is as follows:

JAVASCRIPT Code: [ Select ]
   //Enables the dynamic static menu
   var triggerY, triggerY2;
   IntializeScrollTriggers();
 
   $(window).resize(function() {
      IntializeScrollTriggers();
   });
 
   $(window).scroll(function (event) {
      scrollCompute();
   });
   
   function scrollCompute()
   {
      if($('#container').height() > $('#sidebar').height()) {
         if(($('#sidebar').height() + 10)> $(this).height()) {
            triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
            var scrollY = $(this).scrollTop() + $(this).height();
            if (scrollY >= triggerY) {
               $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10);
               if(scrollY >= triggerY2) {
                  $('#sidebar').css('bottom', scrollY - triggerY2);
               }
               else {
                  $('#sidebar').css('bottom', '0px');
               }
            } else {
               $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '');
            }
         }
         else {
            var scrollY = $(this).scrollTop();
            if (scrollY >= triggerY) {
               $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10).css('top', '10px');
            }
            else {
               $('#sidebar').removeClass('fixed').css('left', '').css('top', '');
            }
         }
      }  
   }
   
   function IntializeScrollTriggers() {
      $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '').css('top', '');
     
      if(($('#sidebar').height() + 10) > $(this).height()) {
         triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
         triggerY = $('#sidebar').offset().top + $('#sidebar').height() - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
      }
      else {
         triggerY = $('#sidebar').offset().top - 10 - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
      }
     
      scrollCompute();
   }
  1.    //Enables the dynamic static menu
  2.    var triggerY, triggerY2;
  3.    IntializeScrollTriggers();
  4.  
  5.    $(window).resize(function() {
  6.       IntializeScrollTriggers();
  7.    });
  8.  
  9.    $(window).scroll(function (event) {
  10.       scrollCompute();
  11.    });
  12.    
  13.    function scrollCompute()
  14.    {
  15.       if($('#container').height() > $('#sidebar').height()) {
  16.          if(($('#sidebar').height() + 10)> $(this).height()) {
  17.             triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
  18.             var scrollY = $(this).scrollTop() + $(this).height();
  19.             if (scrollY >= triggerY) {
  20.                $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10);
  21.                if(scrollY >= triggerY2) {
  22.                   $('#sidebar').css('bottom', scrollY - triggerY2);
  23.                }
  24.                else {
  25.                   $('#sidebar').css('bottom', '0px');
  26.                }
  27.             } else {
  28.                $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '');
  29.             }
  30.          }
  31.          else {
  32.             var scrollY = $(this).scrollTop();
  33.             if (scrollY >= triggerY) {
  34.                $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10).css('top', '10px');
  35.             }
  36.             else {
  37.                $('#sidebar').removeClass('fixed').css('left', '').css('top', '');
  38.             }
  39.          }
  40.       }  
  41.    }
  42.    
  43.    function IntializeScrollTriggers() {
  44.       $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '').css('top', '');
  45.      
  46.       if(($('#sidebar').height() + 10) > $(this).height()) {
  47.          triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
  48.          triggerY = $('#sidebar').offset().top + $('#sidebar').height() - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
  49.       }
  50.       else {
  51.          triggerY = $('#sidebar').offset().top - 10 - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
  52.       }
  53.      
  54.       scrollCompute();
  55.    }


That might give you ideas on how to do it, you will likely have to custom write your own solution but with the above that might give you an idea of how to get started. Remember this is dependent on the jQuery library.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 215 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.