Sticky div element (navigation bar) on bottom of topic

This forum is for all Flare issues not related to any of the other categories.
Post Reply
mtg
Propeller Head
Posts: 12
Joined: Tue Jun 26, 2018 3:56 am

Sticky div element (navigation bar) on bottom of topic

Post by mtg »

Hi,

we have added a navigation bar with previous/next/back-to-top icons that is displayed on the bottom of the topics but on top of the footer:

Code: Select all

 
<body>
       ...
        <MadCap:bodyProxy />
        ...
        <div class="toolbar-bottom">
            ...
        </div>
        <div class="home-footer">
           ...
        </div>
    </body>
Now I want to make the navigation bar sticky so that it is also visible if the topic is too long for the browser window. As soon as the topic is scrolled and the footer becomes visible the navigation bar should be placed on top of the footer again.
It should look like this:
sticky_nav_bar.png
non_sticky_navigation_bar.png
What I've tried so far:
My first try was to adjust the css settings for the div.toolbar-bottom element to 'position: sticky'. This works fine for all browsers except for internet explorer since they do not support the 'sticky' property (and never will because the newer MS Edge already supports it).
So I need another approach that also works for internet explorer. I already tried to use the Foundation's sticky component (https://foundation.zurb.com/sites/docs/sticky.html) similar to the solution in this post: viewtopic.php?f=13&t=29522&p=129518&hil ... er#p129518

However, that does not seem to work. Some of the options show no effect at all:

Code: Select all

 
<body>
	...
	<MadCap:bodyProxy />
	...
	<div data-sticky-container="" id="sticky_top">
		<div class="sticky" data-sticky="" data-stick-to="bottom" data-anchor="foo" style="width: 100%;">
			<div class="toolbar-bottom">
				...
			</div>
		</div>
	</div>
	<div class="home-footer" id="foo">
		...
	</div>
</body>
If I set only data-stick-to="bottom" without any anchor, the navigation bar is correctly displayed on the bottom. But I want it to stay on top of the footer if the footer is visible, therefore I need to set an anchor. I tried all kind of combinations with data-top-anchor="sticky_top:bottom" and data-btm-anchor="foo:top" or only data-anchor="foo" but this does not work. If any of the anchor settings is used, the 'sticky settings' seem to be ignored and the navigation bar is not sticky anymore.

So maybe anybody knows what I am missing in my settings?
You do not have the required permissions to view the files attached to this post.
Post Reply