Sticky TOC Overlaps Footer when Scrolling

This forum is for all Flare issues not related to any of the other categories.
Post Reply
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Sticky TOC Overlaps Footer when Scrolling

Post by arshabhirai »

I have used Flare's two-column format with the fixed SideMenu option, with various hacks, and it looks great! The only issue is that the SideMenu (TOC) overlaps when scrolling down. I tried using z-index, but it didn't help; either the SideNav overlaps footer or the footer overlaps SideNav. I am exploring JQuery or JavaScript solution. It would be great if anyone knows of a better solution.

Screenshot below:
Capture.PNG
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by NorthEast »

I had the same issue, and the only solution I found was to set it up using Foundation's sticky component - which is what Flare's fixed setting is actually using behind the scenes.

First, do not use the Fixed menu setting in Flare's menu proxy skin, make sure it's set to None.
Flare's implementation only allows for a top anchor point, but not a bottom anchor point (which you need to stop it overlapping footer content).

This is the type of layout I used in the master page.
* The menu is anchored at the top and the bottom - the top is anchored to the container sticky_top:top, and the bottom is anchored to the footer sticky_bottom:top: <div class="sticky sticky-menu" data-sticky="" data-top-anchor="sticky_top:top" data-btm-anchor="sticky_bottom:top">

* There's a container for the sticky content, which has an id sticky_top to mark the top anchor point: <div data-sticky-container="" id="sticky_top">

* There's a container for the footer, which has an id sticky_bottom to mark the bottom anchor point: <div class="footer" id="sticky_bottom">

Code: Select all

    <body>
        <div class="row">
            <div class="small-9 columns">
                <MadCap:breadcrumbsProxy />
                <MadCap:bodyProxy />
            </div>

            <div data-sticky-container="" id="sticky_top">
				<!-- the sticky content is anchored to the top of this container -->
                <div class="sticky sticky-menu" data-sticky="" data-top-anchor="sticky_top:top" data-btm-anchor="sticky_bottom:top">
					<!-- this is the sticky menu content - we anchor the top of this to the top of the sticky menu container (sticky_top:top), and anchor the bottom to the top of the footer (sticky_bottom:top) -->
                    <MadCap:menuProxy style="mc-toc-depth: -1;mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
                </div>
            </div>

        </div>

        <div class="footer" id="sticky_bottom">
             <!-- this is footer content - the bottom of the sticky content is anchored to the top of this container -->
            <p>This is your footer.</p>
        </div>
    </body>
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Sticky TOC Overlaps Footer when Scrolling

Post by arshabhirai »

Thank you again, Dave. It worked like a charm. You are the man!
Corinna
Propeller Head
Posts: 17
Joined: Mon Mar 20, 2017 5:56 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by Corinna »

Dave Lee wrote:

Code: Select all

    <body>
        <div class="row">
            <div class="small-9 columns">
                <MadCap:breadcrumbsProxy />
                <MadCap:bodyProxy />
            </div>

            <div data-sticky-container="" id="sticky_top">
				<!-- the sticky content is anchored to the top of this container -->
                <div class="sticky sticky-menu" data-sticky="" data-top-anchor="sticky_top:top" data-btm-anchor="sticky_bottom:top">
					<!-- this is the sticky menu content - we anchor the top of this to the top of the sticky menu container (sticky_top:top), and anchor the bottom to the top of the footer (sticky_bottom:top) -->
                    <MadCap:menuProxy style="mc-toc-depth: -1;mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
                </div>
            </div>

        </div>

        <div class="footer" id="sticky_bottom">
             <!-- this is footer content - the bottom of the sticky content is anchored to the top of this container -->
            <p>This is your footer.</p>
        </div>
    </body>
Unfortunately, that didn't work for me. The menu is still scrolling as always - it doesn't stick to the top anchor point (which is why I cannot check if the bottom anchor worked). What am I missing here?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by NorthEast »

Corinna wrote:Unfortunately, that didn't work for me. The menu is still scrolling as always - it doesn't stick to the top anchor point (which is why I cannot check if the bottom anchor worked). What am I missing here?
Did you read this part?
Dave Lee wrote:First, do not use the Fixed menu setting in Flare's menu proxy skin, make sure it's set to None.
Not sure what to suggest - it works fine for me using 2017r2.
Corinna
Propeller Head
Posts: 17
Joined: Mon Mar 20, 2017 5:56 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by Corinna »

Dave Lee wrote:Did you read this part?
Dave Lee wrote:First, do not use the Fixed menu setting in Flare's menu proxy skin, make sure it's set to None.
Yes, of course.

I think I can answer my own question: I have a header pinned to the top, so anchoring a div outside the document flow will not work.

That does, however, not solve my problem of needing a fixed side menu that doesn't collide with the footer... :(

An anchor using pixels as suggested in the Zurb tutorial didn't work either. That is really strange.

EDIT: I've finally managed to set the bottom anchor. It only seems to respect elements within the body and the document flow. Fixed elements don't seem to work as an anchor, nor do mixed anchor types (pixels versus element id).

"data-margin-top" (value in em) helped with the offset from the top of the page to respect the header.

Thanks for presenting your solution and hinting at the Zurb page with more infos!
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Sticky TOC Overlaps Footer when Scrolling

Post by arshabhirai »

Dave Lee wrote:I had the same issue, and the only solution I found was to set it up using Foundation's sticky component - which is what Flare's fixed setting is actually using behind the scenes.

First, do not use the Fixed menu setting in Flare's menu proxy skin, make sure it's set to None.
Flare's implementation only allows for a top anchor point, but not a bottom anchor point (which you need to stop it overlapping footer content).

This is the type of layout I used in the master page.
* The menu is anchored at the top and the bottom - the top is anchored to the container sticky_top:top, and the bottom is anchored to the footer sticky_bottom:top: <div class="sticky sticky-menu" data-sticky="" data-top-anchor="sticky_top:top" data-btm-anchor="sticky_bottom:top">

* There's a container for the sticky content, which has an id sticky_top to mark the top anchor point: <div data-sticky-container="" id="sticky_top">

* There's a container for the footer, which has an id sticky_bottom to mark the bottom anchor point: <div class="footer" id="sticky_bottom">

Code: Select all

    <body>
        <div class="row">
            <div class="small-9 columns">
                <MadCap:breadcrumbsProxy />
                <MadCap:bodyProxy />
            </div>

            <div data-sticky-container="" id="sticky_top">
				<!-- the sticky content is anchored to the top of this container -->
                <div class="sticky sticky-menu" data-sticky="" data-top-anchor="sticky_top:top" data-btm-anchor="sticky_bottom:top">
					<!-- this is the sticky menu content - we anchor the top of this to the top of the sticky menu container (sticky_top:top), and anchor the bottom to the top of the footer (sticky_bottom:top) -->
                    <MadCap:menuProxy style="mc-toc-depth: -1;mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
                </div>
            </div>

        </div>

        <div class="footer" id="sticky_bottom">
             <!-- this is footer content - the bottom of the sticky content is anchored to the top of this container -->
            <p>This is your footer.</p>
        </div>
    </body>
After Flare's v3 update, this is not working for me. The fixed side menu is overlapping the footer when scrolling. The behavior is the same with Flare's fixed menu option :(.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by NorthEast »

arshabhirai wrote:After Flare's v3 update, this is not working for me. The fixed side menu is overlapping the footer when scrolling. The behavior is the same with Flare's fixed menu option :(.
I've just tried that exact code in 2017r3, and it works fine for me.

You can not use this with a fixed menu; the Fixed menu option must be set to None.
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Sticky TOC Overlaps Footer when Scrolling

Post by arshabhirai »

Dave Lee wrote:
arshabhirai wrote:After Flare's v3 update, this is not working for me. The fixed side menu is overlapping the footer when scrolling. The behavior is the same with Flare's fixed menu option :(.
I've just tried that exact code in 2017r3, and it works fine for me.

You can not use this with a fixed menu; the Fixed menu option must be set to None.
I have the fixed menu set to none. I have to investigate the issue further.
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Sticky TOC Overlaps Footer when Scrolling

Post by arshabhirai »

arshabhirai wrote:
Dave Lee wrote:
arshabhirai wrote:After Flare's v3 update, this is not working for me. The fixed side menu is overlapping the footer when scrolling. The behavior is the same with Flare's fixed menu option :(.
I've just tried that exact code in 2017r3, and it works fine for me.

You can not use this with a fixed menu; the Fixed menu option must be set to None.
I have the fixed menu set to none. I have to investigate the issue further.

You were right, Dave. It looks like there was some CSS change that broke the design. I may have changed it while testing something and forgot to remove it :lol:
DLL
Propeller Head
Posts: 19
Joined: Tue Sep 12, 2017 11:58 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by DLL »

The technique posted by Dave Lee works for me, except that my TOC automatically shrinks to the size of its content just as soon as it starts floating.

Is there any known way to work around this without hard-coding its width?
DLL
Propeller Head
Posts: 19
Joined: Tue Sep 12, 2017 11:58 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by DLL »

I figured out the answer to my own question. Simply add style="width:100%;" to the inner div:

Code: Select all

<div data-sticky-container="" id="sticky_top">
	 <div class="sticky sticky-menu" data-sticky="" data-top-anchor="sticky_top:top" data-btm-anchor="sticky_bottom:top" style="width: 100%;">
		<MadCap:menuProxy />
	</div>
</div>
DLL
Propeller Head
Posts: 19
Joined: Tue Sep 12, 2017 11:58 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by DLL »

Alright, I have another problem here.

If the space between the header and the footer is too short for the TOC menu (because, for example, a page does not have a lot of content), the TOC menu will overlap the footer will not be pushed down below the TOC menu, and the TOC menu will overlap it. The footer will only be pushed down below the TOC menu if the user scrolls or resizes the window.

Would anyone happen to have a workaround for that?
DLL
Propeller Head
Posts: 19
Joined: Tue Sep 12, 2017 11:58 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by DLL »

Okay, once again, I figured out a solution, but it's a little hacky.

The following code will force the size of the page and the position of the footer to be readjusted each time something is added to the side navigation menu:

Code: Select all

<script>
    $("div.sideContent").on("DOMNodeInserted", function() {
        $(window).trigger("resize");
    });
</script>
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by NorthEast »

DLL wrote:The following code will force the size of the page and the position of the footer to be readjusted each time something is added to the side navigation menu:
Whilst that might work, it will presumably trigger multiple times though, for each item Flare adds to the DOM.

I'd suggest using the "loaded" event which will tell you when Flare has finished adding items to the menu.
http://kb.madcapsoftware.com/Content/Mi ... _Menus.htm
DLL
Propeller Head
Posts: 19
Joined: Tue Sep 12, 2017 11:58 am

Re: Sticky TOC Overlaps Footer when Scrolling

Post by DLL »

Thank you Dave Lee! I figured this would trigger the event much more than necessary and I was looking exactly for a solution like this.

Here's the code now, and it works like a charm:

Code: Select all

<script>
	$(".menu.mc-component").on("loaded", function() {
		$(window).trigger("scroll");
	});
</script>
Post Reply