Foundation-sites: Off-canvas Foundation 6

[antopossegithub]

With previous versions the component Off-canvas I was using so much.
Now I saw that as a problem.

If we are half page of our site, and we are going to open our menu, suddenly the page scrolls up shooting quickly.

There is no way to ensure that works like the old off-canvas?

Off-canvas - Old version
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html

Off-canvas - New version
http://foundation.zurb.com/sites/docs/off-canvas.html

[antopossegithub]

Not convenient to navigate from a mobile device with a fixed header at the top and when I open the burgher menu the page back to top drasticaly :(
this is my problem that I'd like to fix

[Grafikart]

There is a way to have the same behaviour. There is an option forceTop (that isn't used at the moment but did a PR to fix this). This variable will only solve half of the problem since forceFocus will set focus to the first element, forcing the scroll to top.

Foundation.OffCanvas.defaults.forceTop = false;
Foundation.OffCanvas.defaults.autoFocus = false;

Should bring back the old behaviour after this PR

[zurbrandon]

This is mainly due to the need to autofocus for accessibility reasons, so i don;t think we'd opt to be able to easily disable it.

[DaGhostman]

Scrolling to top for mobile/desktop break accessibility even more, when users have to go through all the content again?

[antopossegithub]

Good!! This is the very problem.....users must scroll all the content again!!!

[antopossegithub]

The best solution would be:
• wherever I'm in the page open my menu, and open in that precise point without returning to the top of the page and when I close rest where I was before.

It is possible?

[marcomessa]

Hello, I have the same issue, tried to fix with forceTop: false but nothing happens. When I toggle off-canvas menu, my page jumps to top and after a little time, it jumps again to the menu position. I tried enabling forceTop via js or via html data-options. Should I open another issue?

*edit:
If i disable autoFocus, it jumps to the top of the page, without coming back.

[marcomessa]

I found a temporary solution. In bower_components/foundation-sites/js/foundation.offcanvas.js, at line 211, comment $('body').scollTop(0) and rebuild the files.

[DaGhostman]

This could be warped in an if statement to check for forceTop. Maybe a
possible PR?
On 8 Feb 2016 12:05, "marcomessa" [email protected] wrote:

I found a temporary solution. In
bower_components/foundation-sites/js/foundation.offcanvas.js, at line 211,
comment $('body').scollTop(0) and rebuild the files.

—
Reply to this email directly or view it on GitHub
https://github.com/zurb/foundation-sites/issues/7842#issuecomment-181337313
.

[marcomessa]

Yep. I've updated the code, now the solution is:

if ( this.options.forceTop == true ) { $('body').scrollTop(0); }

[marcomessa]

Yup, it was already fix in development version!

if(this.options.forceTop){
$('body').scrollTop(0);
}

Sweet!

[antopossegithub]

I use the foundation.js large file, and I've this piece of code

OffCanvas.prototype.open = function(event, trigger) {
if (this.$element.hasClass('is-open') || this.isRevealed){ return; }
var _this = this,
$body = $(document.body);
$('body').scrollTop(0);
// window.pageYOffset = 0;

// if(!this.options.forceTop){
// var scrollPos = parseInt(window.pageYOffset);
// this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
// if(this.$exiter.length){
// this.$exiter[0].style.transform = 'translate(0,' + scrollPos + 'px)';
// }
// }

What should I do?
what I can d

[marcomessa]

Comment the line
$('body').scrollTop(0);
Or wrap it in the if statement posted above.

[rafibomb]

The scroll top is an accessibility hook and just general user experience. While we don't love the jump to top, there may not be a better way.

The challenge:

• You have a sticky or fixed trigger for the off-canvas
• User open the menu halfway down the page,
• menu opens but can't be seen because it's at the top of the page and out of view
• this is a challenge with a menu that is attached to the body and pushes it.

You can instead use a different component - a menu that overlays the body
Example: http://codepen.io/rafibomb/pen/eJVvbx

So doing what you want with the off-canvas component is not likely a possibility.

[antopossegithub]

I'm with you rafibomb :+1: :+1:

I think this is a big problem that Mr. Foundation must resolve

[SalahAdDin]

I want to Foundation come back old top bar feautre.

[antopossegithub]

I think the solution by rafibomb is the best way.....

[christianmagill]

@rafibomb Why would you need to overlay the menu on-top of the content? Couldn't you just make the off-canvas position fixed, attached to top and bottom, and translate both the off-canvas and the content as needed?

[JeremyEnglert]

Agree with @rafibomb. This type of functionality is a must with an off-canvas menu. Closing this for now.

[antopossegithub]

???