Sticky TOC Overlaps Footer when Scrolling
-
- Propeller Head
- Posts: 44
- Joined: Tue Feb 28, 2017 12:15 pm
Sticky TOC Overlaps Footer when Scrolling
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:
Screenshot below:
You do not have the required permissions to view the files attached to this post.
Re: Sticky TOC Overlaps Footer when Scrolling
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">
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>
-
- Propeller Head
- Posts: 44
- Joined: Tue Feb 28, 2017 12:15 pm
Re: Sticky TOC Overlaps Footer when Scrolling
Thank you again, Dave. It worked like a charm. You are the man!
Re: Sticky TOC Overlaps Footer when Scrolling
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?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>
Re: Sticky TOC Overlaps Footer when Scrolling
Did you read this part?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?
Not sure what to suggest - it works fine for me using 2017r2.Dave Lee wrote:First, do not use the Fixed menu setting in Flare's menu proxy skin, make sure it's set to None.
Re: Sticky TOC Overlaps Footer when Scrolling
Yes, of course.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.
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!
-
- Propeller Head
- Posts: 44
- Joined: Tue Feb 28, 2017 12:15 pm
Re: Sticky TOC Overlaps Footer when Scrolling
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 .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>
Re: Sticky TOC Overlaps Footer when Scrolling
I've just tried that exact code in 2017r3, and it works fine for me.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 :(.
You can not use this with a fixed menu; the Fixed menu option must be set to None.
-
- Propeller Head
- Posts: 44
- Joined: Tue Feb 28, 2017 12:15 pm
Re: Sticky TOC Overlaps Footer when Scrolling
I have the fixed menu set to none. I have to investigate the issue further.Dave Lee wrote:I've just tried that exact code in 2017r3, and it works fine for me.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 .
You can not use this with a fixed menu; the Fixed menu option must be set to None.
-
- Propeller Head
- Posts: 44
- Joined: Tue Feb 28, 2017 12:15 pm
Re: Sticky TOC Overlaps Footer when Scrolling
arshabhirai wrote:I have the fixed menu set to none. I have to investigate the issue further.Dave Lee wrote:I've just tried that exact code in 2017r3, and it works fine for me.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 .
You can not use this with a fixed menu; the Fixed menu option must be set to None.
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
Re: Sticky TOC Overlaps Footer when Scrolling
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?
Is there any known way to work around this without hard-coding its width?
Re: Sticky TOC Overlaps Footer when Scrolling
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>
Re: Sticky TOC Overlaps Footer when Scrolling
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?
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?
Re: Sticky TOC Overlaps Footer when Scrolling
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:
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>
Re: Sticky TOC Overlaps Footer when Scrolling
Whilst that might work, it will presumably trigger multiple times though, for each item Flare adds to the DOM.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:
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
Re: Sticky TOC Overlaps Footer when Scrolling
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:
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>