फाउंडेशन 5 ऑफ-कैनवास नेविगेशन मेनू चिपचिपा बनाने के लिए कैसे?

मैं ऑफ-कैनवास नेविगेशन मेनू जोड़ने के लिए फाउंडेशन के नवीनतम संस्करण का उपयोग कर रहा हूं और टैब-बार में टॉगल जोड़ रहा हूं। जबकि मेरे पास टैब-बार चिपचिपा होने के साथ काम कर रहा है, तो ऑफ-कैनवास मेनू की सामग्री पृष्ठ के साथ स्क्रॉल करती है। मैं मेनू की सामग्री को चिपचिपा कैसे बना सकता हूं जैसे किसी भी आकार की स्क्रीन या पृष्ठ टॉगल पर क्लिक करने वाले पृष्ठ लंबवत स्क्रॉल स्थिति स्क्रॉल के बिना मेनू सामग्री दिखाएगी? मेरा एचटीएमएल अब तक है:फाउंडेशन 5 ऑफ-कैनवास नेविगेशन मेनू चिपचिपा बनाने के लिए कैसे?

<!doctype html> 
<html class="no-js" lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Foundation | Welcome</title> 
    <link rel="stylesheet" href="css/foundation.css" /> 
    <script src="js/vendor/modernizr.js"></script> 
</head> 
<body> 
    <div class="off-canvas-wrap" data-offcanvas> 
     <div class="contain-to-grid sticky"> 
      <nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large"> 
       <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">Foundation</h1> 
       </section> 
      </nav> 
     </div> 

     <div class="inner-wrap"> 

      <!-- Off Canvas Menu --> 
      <aside class="left-off-canvas-menu"> 
       <!-- whatever you want goes here --> 
       <ul> 
        <li><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
        <li><a href="#">Item 3</a></li> 
        <li><a href="#">Item 4</a></li> 
        <li><a href="#">Item 5</a></li> 
       </ul> 
      </aside> 

      <div class="row"> 
       <div class="large-12 columns"> 
        <h1>Welcome to Foundation</h1> 
       </div> 
      </div> 

      <!-- Content goes here --> 

      <!-- close the off-canvas menu --> 
      <a class="exit-off-canvas"></a> 

     </div> 
    </div> 

    <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> 
</body> 
</html>

स्रोत

2014-04-16 Matt W

अरे यहां पर पहली पोस्ट की जाँच: http://foundation.zurb.com/forum/posts/547-off-canvas -with-fixed-top-bar? पृष्ठ = 2 यह ठीक से काम कर रहा प्रतीत होता है यदि आप उसी प्रभाव की तलाश में हैं जो मैं था। –

कृपया स्वीकार किए गए उत्तर को चिह्नित करना याद रखें। – tehlivi

सामग्री की ऊंचाई 95vh और ओवरफ्लो-वाई = स्क्रॉल करें। जब भी दाईं ओर की सामग्री स्क्रॉल हो जाती है, तो ऑफ-कैनवास मेनू अप्रभावित होता है और शीर्ष पर रहता है।

सीएसएस:

.mycontent {  
    height:95vh; 
    overflow-y:scroll; 
    /* fix scrolling on webkit touch devices (iPhone etc) */ 
    -webkit-overflow-scrolling: touch; 
}

HTML:

<div class="row mycontent" > 
     <div class="large-12 columns"> 
      <h1>Welcome to Foundation</h1> 
     </div> 
    </div>

स्रोत

2015-03-15 14:14:20

यहां vh और vw के लिए ब्राउज़र समर्थन का एक अच्छा लिंक है http://caniuse.com/#feat=viewport-units –

स्पष्टीकरण के लिए, वर्ग "mycontent" केवल पृष्ठ सामग्री के आसपास जाता है, टैब-बार या कैनवास शामिल न करें मेनू। यह "चिपचिपा" या "निश्चित" कक्षाओं को जोड़ने के बिना काम करता है। – tehlivi

यह iPhones पर चिकनी स्क्रॉलिंग भी तोड़ता है। स्क्रॉलिंग झटकेदार हो जाती है। एंड्रॉइड ठीक है। – tehlivi

इस सीएसएस में प्रयास करें (काम करता है 100%)

.tab-bar { 
    position: fixed; 
    width: 100%; 
    z-index: 702; 
}

स्रोत

2015-03-21 14:09:02

सवाल ने ऑफ-कैनवास भाग चिपचिपा बनाने के लिए कहा। यह केवल टैब बार चिपचिपा बनाता है। – tehlivi

मैं एक ही मुद्दा था, यह करने के लिए नहीं मिल सका खुले होने पर चिपकाएं। ,> Open_method "ओवरलैप"

अब यह overlaps के लिए -> सेटिंग्स -

.tab-bar { 
position: fixed; 
z-index: 9999; 
width: 100%; 
} 

Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s. 
.inner-canvas-menu-wrapper 
{ 
position: fixed; 
top: 0; 
overflow-y: hidden; 
width: inherit; 
padding-top: 2.8125rem; (standard height of the "tab-bar") 
}

जे एस

बदल दिया foundation.offcanvas.js:

सीएसएस: अंत में मैं इस के साथ चला गया लेकिन कम से कम यह तय/चिपचिपा है। आप close_on_click को "true" में भी इस सेटअप में बदलना चाह सकते हैं।

आप फाउंडेशन 6 उपयोग कर रहे हैं यह डिफ़ॉल्ट रूप से तय किया जाएगा: https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference

स्रोत

2016-04-01 12:18:56 XaYdEk

फाउंडेशन 5 ऑफ-कैनवास नेविगेशन मेनू चिपचिपा बनाने के लिए कैसे?

उत्तर

संबंधित मुद्दे