Prevent scroller sidebar to overlap with footer

Question

I have one sidebar with code

 <section>
   <div class="8u">
   </div>
   <div class="4u">
      <div id="sidebar"> 
        <div id="scroller-anchor"></div> 
          <div id="scroller" style="margin-top:10px; width:270px"> 
            Content Here
          </div>
        </div>
       </div>
    </div>
     </section>
     <footer>Content Footer</footer>

NOw my problem is that when i scroll the screen then sidebar scrolls smoothly but when sidebar reaches at footer then sidebar overlap the footer content. I want that sidebar should remain at last position when footer start is reached.

My JQuery Code to scroll the sidebar is:

   //<![CDATA[ 
     $(window).load(function(){
       $(function() {
      var a = function() {
      var b = $(window).scrollTop();
      var d = $("#scroller-anchor").offset().top;
      var c=$("#scroller");
    if (b>d) {
       c.css({position:"fixed",top:"50px"})
     } else {
      if (b<=d) {
       c.css({position:"relative",top:""})
      }
     }
    };
    $(window).scroll(a);a()
  });
  });//]]>

Please help here. Link to my JS Fiddle

build us a [fiddle](http://jsfiddle.net), it will help us get you a better answer — Matheus, Apr 25 '14 at 21:17
Where's your CSS? That's what you should control `#scroller{overflow-y:scroll;}`. That should not have anything to do with your footer. Do you have the scroll over the entire `section`? — StackSlave, Apr 25 '14 at 21:18
You'll have to find the sidebar offset from the document bottom and compare to the height of the footer on scroll. Then once you hit, set the CSS `bottom` of the sidebar to the height of the footer (and maybe `top` to auto). There are also plugins available which have this built in. — Derek, Apr 25 '14 at 21:31
Hi @derek s.. Ur logic seems to be good here.. Can u pl let me know how to find offset.. Little exmple ll do nd pl let me knw plugins also — Gags, Apr 25 '14 at 21:37
@GagandeepSharma, no time now, but check out [this answer](http://stackoverflow.com/questions/9872128/get-bottom-and-right-position-of-an-element). — Derek, Apr 25 '14 at 21:39
@Derek S ... That link did not work.. I tried doing that way,.. but no luck — Gags, Apr 26 '14 at 07:21

FrancescoMM · Accepted Answer · 2014-04-26T10:14:09.233

4

Instead of using fixed, keep absolute and use the scrolltop as a top coordinate of the #sidebar (or add to it):

SEE FIDDLE HERE

** EDITED ** Use $("#scroller").height()instead of $("#sidebar").height()

//<![CDATA[ 

$(function () {

    var a = function () {
        var b = $(window).scrollTop();
        var d = $("#scroller-anchor").offset().top;
        var f = $("#footer").offset().top;
        var c = $("#scroller");
        var h = $("#scroller").height() + 20; // margin

        if (b > d) {
            var myTop = $(window).scrollTop();
            if (myTop > f - h) myTop = f - h;
            c.css({
                position: "absolute",
                top: myTop,
                bottom: ""
            })
        } else {
            if (b <= d) {
                c.css({
                    position: "absolute",
                    top: "",
                    bottom: ""
                })
            }
        }
    };
    $(window).scroll(a);
    a()

}); //]]>

This way if you manually set the vertical position (instead of leaving it to "fixed") you can compare it to other elements in the page and alter it in any way you wish.

edited Apr 26 '14 at 10:14

answered Apr 26 '14 at 09:23

FrancescoMM

2,845
1
18
29

@ FrancescoMM ....Thanks for solution. It wrkd on fiddle bt not on website. Can u please help. Sidebar is even overlapping half of the footer – Gags Apr 26 '14 at 09:39
1

Be careful that I kept var h out of the a() function because when inside it if gave 0 except at the first loop. Is the vertical position of the sidebar ok, except when on footer or is it misaligned (too high?)? – FrancescoMM Apr 26 '14 at 09:46
1

You may try with some alert(h) and alert(f) inside a() to see if the footer position and sidebar height are set ok. do some dragging to see the h doesn't drop to zero. If it drops to zero on drag then it is set inside the function. If it is set to to 0 (or wrong value) then it is set before the sidebar gets it real height. In this case set it somewhere else (after filling the sidebar?) – FrancescoMM Apr 26 '14 at 09:52
If i do alert then `h` gives value 10 either on scroll or not on scroll.. And `f` value changes as 2334.5 on scroll.. One more thing that thr is no css attached to `sidebar` – Gags Apr 26 '14 at 10:10
1

@GagandeepSharma try to use the scroller height: http://jsfiddle.net/4QDQg/3/ I updated the fiddle and the answer. 10 is really too little it probably doesn't get the height with all the contents. You have to get the height of the sidebar with all content set, and not hidden or absolute positioned, if hidden show it before calculations, if absolute positioned, try getting the size of its contents instead (#scroller) – FrancescoMM Apr 26 '14 at 10:21
1

Worked like charm.. i edited from 20 to 200 and now it is perfect .. cheers @FrancescoMM – Gags Apr 26 '14 at 10:32

score 0 · Answer 2 · answered Apr 25 '14 at 21:24

0

This can be done using CSS

Add this style to sidebar id

#sidebar{height:400px; overflow-y:auto;}

adjust height according to contents of sidebar

answered Apr 25 '14 at 21:24

user1974500

19
2

Once you will add this in styles. It will add scroll only on sidebar if height of sidebar will be more than the fixed height provided by you. – user1974500 Apr 25 '14 at 21:29
I think you misunderstood the problem. – Derek Apr 25 '14 at 21:36
@user1974500.. this is not the problem.. pl understand and answer – Gags Apr 26 '14 at 06:18

Prevent scroller sidebar to overlap with footer

2 Answers2