I'm working with manipulating foundations off-canvas navigation to get it to do what I want and it's been causing quite a few issues. One main one I've noticed is that when I stick the header to the top of the page so it scrolls with me as I go down pages, when you open it it opens at the top of the page. So for that I added a .click(function) to get the page to scroll back to the top which can be found here:
jQuery:
jQuery('section.left-small a.menu-icon').click(function() {
var screenTop = jQuery(document).scrollTop();
jQuery('#content').css('top', screenTop);
//console.log(screenTop);
jQuery('body').scrollTop(0);
});
HTML:
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title uppercase"><a href="/">Island Company</a></h1>
<a href="/checkout/suitcase.html">
<img src="/media/island/suitcase.png" />
<span class="suitcase-item-count">(<?= $quote->getItemCount(); ?>)</span>
</a>
</section>
</nav>
So my question is how do I use the variable "screenTop" to get the page to return to it's stored original position within the body of the page when the user CLOSES the "a.left-off-canvas-toggle" menu?
Here is a working fiddle: http://jsfiddle.net/CMbBC/18/
I think this slution is somewhat close to your answer.
JQuery
$("#check").click(function() {
if ($("#menu").is(":hidden")) {
$(document).scrollTop(lastPos);
} else {
// do that
}
});
var lastPos=0;
$("#getInfo").click(function(){
$("#menu").toggle();
lastPos=$(document).scrollTop();
});
In demo first click on getInfo
then click check
DEMO
Update 1:
$( document).scroll(function() {
//store current scroll pos
//lastPos=$(document).scrollTop();
});
var lastPos=0;
$("#getInfo").click(function(){
//store scroll pos befor toggle
lastPos=$(document).scrollTop();
$( "#menu" ).toggle( "slow", function() {
// Animation complete.
if ($("#menu").is(":hidden")) {
$(document).scrollTop(lastPos);
} else {
// do that
}
});
});
if i'm right to understand your question you want to scroll original position try this
jQuery(document).ready(function() {
var screenTop=jQuery(document).scrollTop();
//sending page to the top when menu opens up
jQuery('.left-small a.menu-icon').click(function() {
//need to be able to send page back to original position before clicking on menu button
//jQuery('#content').css('top', screenTop);
console.log(screenTop);
temp = jQuery(document).scrollTop();
jQuery('body').scrollTop(screenTop);
screenTop = temp;
//when top menu closes, return page to previous location
//previous location is stored in var screenTop
//jQuery('body').animate(screenTop);
//if ('a.menu-icon')
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.