Foundation Off-Canvas sticky menu bar to stick to bottom

问题

I am trying to create an off-canvas menu with foundation 6 like it's done in the official site.

When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen.

.title-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
}

But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed.

Anyone had this problem and solved it yet?

回答1:

There are a few changes to be made.

1. The <div class="content"> should be mentioned inside the <div class="off-canvas-content">. Off-canvas is designed to work with contents written inside its off-canvas-content class.

2. The <div class="off-canvas-content"> should be pushed to use the complete vertical height. You can mention, height:100vh; although, beware of the browser compatibility.

3. The <div class="off-canvas position-left"> gets another class is-open added to it, whenever the menu icon is toggled. Like point 2, this should also be pushed to use the entire vertical height.

Here is a working example for your reference.

Note: If you feel the transition is a bit odd, install motion-ui and apply some transition.

来源：https://stackoverflow.com/questions/39226703/foundation-off-canvas-sticky-menu-bar-to-stick-to-bottom