Fixed element scroll limit

  • mista-two-k
  • Beginner
  • Beginner
  • mista-two-k
  • Posts: 57

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 140 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.