2014-09-12 65 views
4

我正在操作基礎之外的導航工具,以便讓它按照我的要求進行操作,並且導致了很多問題。我注意到的一個主要問題是,當我將頁眉粘貼到頁面的頂部時,當頁面向下滾動時,滾動頁面,當您打開它時,它會在頁面頂部打開。所以,我加入了。點擊(函數)來獲取頁面回滾動到頂部可以在這裏找到:當用戶關閉導航時,將用戶恢復到原來的位置

的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>&nbsp; 
     </a> 
    </section> 
</nav> 

所以我的問題是,當用戶關閉「a.left-off-canvas-toggle」菜單時,如何使用變量「screenTop」使頁面返回到頁面主體中存儲的原始位置?

這裏是工作提琴:http://jsfiddle.net/CMbBC/18/

+2

它是很好的貼在小提琴 – 2014-09-12 14:46:10

+0

代碼您是否嘗試過獲得「div」(或任何其他容器)偏移頂部,將該數據存儲到一個變量並使用它滾動? – 2014-09-12 14:53:52

+0

男人程序員,我添加了一個小提琴。 Maurizio,我不完全確定你的意思是什麼 – rklitz 2014-09-12 14:55:59

回答

0

我覺得這slution有點接近你的答案。

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(); 
}); 

在演示先點擊getInfo然後單擊check
DEMO

更新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 
     } 
    });  
}); 

DEMO

+0

唯一的問題是我只有一個按鈕,我可以點擊。我沒有兩個不同的按鈕,我可以點擊,例如 – rklitz 2014-09-12 15:12:05

+0

看到我的更新。也許你會找到你的答案。 – Hamix 2014-09-12 15:21:11

0

如果我正確理解你的問題,你要滾動原來的位置試試這個

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') 
    }); 

}); 

DEMO

+0

這是我想要的方式,除了翻轉。當我關閉菜單時,我希望頁面返回到打開菜單時的位置。現在,當我向下滾動並打開導航時,它會回到頂部。然後當我關閉它時,它保持在頂部。但是當我再次打開並關閉它時,它會返回到我第一次打開導航時的位置 – rklitz 2014-09-12 15:26:04

相關問題