SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jQuery floating sidebar margin

    I already have most of the code to successfully float my sidebar and make it follow your scrollbar.

    The problem I have however, is that there is a small margin between the sidebar and the footer when the scrollbar reaches its end.

    How do I correct this little margin? Nothing, that important but I do want to fix it badly.

    http://spatialvoid.net/

    About tab

    Thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    How do I correct this little margin?
    There's a large margin on my screen, because the floating part is fixed to the top of the page.

    What seems to be worse though, is when you resize the browser window so that the floating part is taller than what can fit on the screen. When you then scroll to the end, the floating part pushes the footer further away.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so how can I get this to work? i just want the sidebar to follow you so that its visible when you scroll from where it is initially positioned to the footer all the way down.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    so how can I get this to work? i just want the sidebar to follow you so that its visible when you scroll from where it is initially positioned to the footer all the way down.
    It seems that you are wanting different things depending on where the scroll is. At the top of the page you want the floating sidebar to be aligned with the top, and at the bottom of the page you want it aligned with the bottom.

    What happens when you've scrolled half-way down? Do you want the floating sidebar to still be aligned with the top of the screen? What then when further down? Do you want it aligned still with the top, or with the bottom?

    Or do you want it to gradually move down the screen as you scroll down, so that when you've scrolled halfway, the floating sidebar will also be halfway down the screen, and when you've scrolled to the bottom the sidebar is at the bottom too.

    Give some details of what you actually want, because what I've just described are only a few of the possible scenarios.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, what I wish to achieve is your last scenario, except bottom is footer

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    Yes, what I wish to achieve is your last scenario, except bottom is footer
    Okay then, what do you need to know in order to achieve that?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how i can edit my current code to do what i want with no glitch

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    how i can edit my current code to do what i want with no glitch
    That is something that involves quite a few calculations. You'll need to know the bottom of the header and the top of the footer, and from their difference remove the height of the floating sidebar. What remains is the total amount of movable distance for the floating sidebar.

    From that movable difference, you would then want to position the floating sidebar along that section based on the percentage of the page that has been scrolled.

    That percentage starts from when the bottom of the header is at the top of the page, and ends when the top of the footer is at the bottom of the page. In between those two extremes is the area of interest, and it's how far that the page has scrolled between those two points which determines how far to push the floating sidebar down the page.

    It all gets rather complex really, but if you put your mind to it you can sort it out. We can definitely help you to answer any questions about how to do any parts that you might get stuck on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I came up with this code but it doesn't seem to work

    Code:
        $(window).scroll(function() {
            var dynamicSidebarHeight = $('#sidebar').height();
    
            if ($(window).height() > dynamicSidebarHeight) {
                var fixedFooterOffset = 350;
                var scrollTo = $(window).scrollTop()
                var calculatedMaxTop = $('#footer').offset().top - dynamicSidebarHeight - fixedFooterOffset;
                var fixedHeaderOffset = 400;
                var viewportHeight = $(window).height();
    
                if (scrollTo > calculatedMaxTop) {
                    scrollTo = calculatedMaxTop;
                }
                else if (scrollTo < fixedHeaderOffset) {
                    scrollTo = 0;
                }
                else
                {
                    scrollTo -= fixedHeaderOffset - viewportHeight/2;
                }
    
                $('#sidebar')
                .animate(
                    { top: scrollTo + 'px' },
                    { queue: false, duration: 500, easing: 'easeInOutSine' }
                );
            }
        });

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    It seems like that element doesn't want to reposition itself according to the top property. You can try it out with marginTop instead to confirm that the script is running though.

    You'll only have refinements to make to the script once you get the sidebar actually moving.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for helping me and guiding me through, I'm almost there!

    The sidebar is scrolling as intended however there are still problems.

    When the page isn't long enough, the sidebar should still scroll to the footer, but it doesn't.

    Also, when the page is long enough, when the sidebar reaches the footer, it is still possible to scroll even further down infinitely with the sidebar pushing the footer down.

    I was wondering if it would be possible to make the footer absolute, but not screw up everything.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    The sidebar is scrolling as intended however there are still problems.
    There might be a few calculations that need refinement.

    The two places that seem to most require checking are shortly after the header has scrolled off the top of the page, and shortly before the footer appears at the bottom of the page.

    Nearly all web browsers support console.log() so you should be able to use that to ensure that the numbers make sense.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you read my main problems? The answer you have given doesn't seem to answer my problem

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK got it working

    Code:
    $(window).scroll(function() {
    var dynamicSidebarHeight = $('#sidebar').height();
    if ($(window).height() > dynamicSidebarHeight) {
    var fixedFooterOffset = 350;
    var scrollTo = $(window).scrollTop()
    var calculatedMaxTop = $('#footer').offset().marginTop - dynamicSidebarHeight - fixedFooterOffset;
    var fixedHeaderOffset = 350;
    if (scrollTo > calculatedMaxTop) {
    scrollTo = calculatedMaxTop;
    }
    else if (scrollTo < fixedHeaderOffset) {
    scrollTo -= fixedHeaderOffset - 350;
    }
    else {
    scrollTo -= fixedHeaderOffset - 350;
    }
    $('#sidebar').animate ({ 
    marginTop: scrollTo + 'px' }, { 
    queue: false, 
    duration: 500, 
    easing: 'easeInOutSine'
    });
    }
    });
    The only problem that remains is when I resize the window and scroll down, my second problem reoccurs. It seems the only viable solution would be to make the footer unmovable. How could this be done?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Why is the footer offset explicitly set at 350? Could that be the cause of the problem, and can the value be calculated instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    shouldnt make a difference as the footer offset only appears in the inequality

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    The only problem that remains is when I resize the window and scroll down, my second problem reoccurs. It seems the only viable solution would be to make the footer unmovable. How could this be done?
    That's not the only solution. What seems to be a more viable solution is to ensure that the sidebar is not positioned so low that it causes the footer to be pushed away from it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does make sense however I don't know how I can do that

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    That does make sense however I don't know how I can do that
    Let's try and figure out how then.

    You'll need the calculations used to work out the positioning of the sidebar when you're at the bottom.
    You'll also need to work out the largest value that the sidebar position can possibly be, before the sidebar starts pushing against the bottom of its container.

    Once you have that information, you should be able to update the script so that the sidebar keeps its proper distance away from the bottom of its container.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it working like you said, however it wouldn't be possible to have the sidebar hit the footer but not push it?

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SpatialVoid View Post
    Got it working like you said, however it wouldn't be possible to have the sidebar hit the footer but not push it?
    That would only happen if the sidebar wasn't capable of interfering with the rest of the document.

    That should be achievable by setting the sidebar to have an absolute position, which removes it from the normal flow of the document.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If that's the only way then I'll settle, thank you very much for your help. I really do appreciate it!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •