जब मैं नीचे या ऊपर स्क्रॉल करता हूं तो मेनू को कैसे दिखाया या छुपाएं?

Question

जब मैं इस मेनू को छिपाने के लिए नीचे स्क्रॉल कर रहा हूँ और जब मैं इस दिखाने के लिए स्क्रॉल कर रहा हूँ।

मेरे मेनू बॉट है:

<script> 
      var previousScroll = 0; 
      $(window).scroll(function(event){ 
       var scroll = $(this).scrollTop(); 
       if (scroll > previousScroll){ 
        $("menu-footer").filter(':not(:animated)').slideUp(); 
       } else { 
        $("menu-footer").filter(':not(:animated)').slideDown(); 
       } 
       previousScroll = scroll; 
      }); 
    </script> 

    <section id="menu-footer"> 
     <ul> 
      <li> 
       <li><a href="javascript:history.back()"><i class="fa fa-arrow-circle-left"></i><?php _e("Back", ET_DOMAIN); ?></a></li> 
      </li> 
      <li> 
       <a class="<?php echo $nearby_active; ?>" href="#" id="search-nearby"><i class="fa fa-compass"></i><?php _e("Nearby", ET_DOMAIN); ?></a> 
       <form id="nearby" action="<?php echo get_post_type_archive_link('place') ?>" method="get" > 
        <input type="hidden" name="center" id="center_nearby" /> 
       </form> 
      </li> 
      <!--<li><a href="#"><i class="fa fa-plus"></i>Submit</a></li>--> 
      <!--<li> 
       <a class="<?php echo $review_active; ?>" href="<?php echo et_get_page_link('list-reviews') ?>"> 
        <i class="fa fa-comment"></i><?php _e("Reviews", ET_DOMAIN); ?> 
       </a> 
      </li>--> 
      <li><a class="<?php echo $post-place; ?>" href="<?php echo et_get_page_link('post-place')?>"><i class="fa fa-flag-checkered"></i><?php _e("Post an Ad", ET_DOMAIN); ?></a></li> 
      <?php if(has_nav_menu('et_mobile_header')) { ?> 
      <li> 
       <li><a href="#" class="search-btn"><i class="fa fa-search-plus"></i><?php _e("Search", ET_DOMAIN); ?></a></li> 
      </li>  
      <li>     
       <a href="javascript:history.back()"><i class="fa fa-refresh"></i><?php _e("Refresh", ET_DOMAIN); ?></a> 
      </li> 
      <?php } ?> 
     </ul> 
    </section> 

ऊपर स्क्रिप्ट क्या मैं अपने मेनू को छिपाने के लिए इस्तेमाल करने की कोशिश है। मेनू-पाद लेख के लिए मेरी सीएसएस है:

#menu-footer { 
    width: 100%; 
    background: #5f6f81; 
    position: fixed; 
    bottom: 0; 
    transition: top 0.2s ease-in-out; 
    z-index: 100 
} 

क्या मैं इस स्क्रिप्ट काम कर रहे बनाने के लिए याद आ रही है? यदि आपके पास मेरे लिए एक और समाधान है तो यह सहायक होगा।

Answer 1

मैंने कोड में त्वरित रूप से समझने में आसान होने के लिए सादे जावास्क्रिप्ट में यह पहला उदाहरण बनाया है। यह मेनू (0 से -100 के लिए) सीएसएस शैली का 'सबसे नीचे' विशेषता को बदलने स्क्रॉलबार की स्थिति के अनुसार छुपाता है (जब स्क्रॉलबार ऊपर से 0 से अधिक पिक्सल है)। यदि स्क्रॉलबार शीर्ष (0px) पर वापस आता है तो मेनू फिर से दिखाई देता है (-100 से 0 तक)।

window.addEventListener("scroll", bringmenu); 
 

 
function bringmenu() { 
 
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) { 
 
     document.getElementById("bottommenu").style.bottom = "-100%"; 
 
    } else { 
 
     document.getElementById("bottommenu").style.bottom = "0"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
    background: lavender; 
 
} 
 

 
#bottommenu { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    background: tomato; 
 
    -webkit-transition: bottom 2s; 
 
    transition: bottom 2s; 
 
}

<div id=content> 
 
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> 
 
</div> 
 

 
<div id=bottommenu> 
 
<span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span><br><span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span> 
 
</div>

अपडेट:: एक सीएसएस संक्रमण प्रभाव परिवर्तन एनिमेट होने टिप्पणियों पर अनुरोध किया है, यह दूसरा टुकड़ा/मेनू खाल जब ऊपर/नीचे स्क्रॉल लाता है, बार के वर्तमान की परवाह किए बिना स्थिति (दिशा को खोजने के लिए, जब स्क्रॉल सक्रिय हो जाता है तो यह पिछली स्थिति के साथ वर्तमान स्थिति की तुलना करता है, फिर अगले स्क्रॉल ईवेंट में तुलना करने के लिए वर्तमान स्थिति को एक चर में संग्रहीत करता है):

var lastScrollTop = 0; 
 

 
window.addEventListener("scroll", function(){ 
 
    var st = window.pageYOffset || document.documentElement.scrollTop; 
 
    if (st > lastScrollTop){ 
 
     document.getElementById("bottommenu").style.bottom = "-100%"; 
 
    } else { 
 
     document.getElementById("bottommenu").style.bottom = "0"; 
 
    } 
 
    lastScrollTop = st; 
 
}, false);

body { 
 
    margin: 0; 
 
    background: honeydew; 
 
} 
 

 
#bottommenu { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    background: hotpink; 
 
    -webkit-transition: bottom 2s; 
 
    transition: bottom 2s; 
 
}

<div id=content> 
 
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> 
 
</div> 
 

 
<div id=bottommenu> 
 
<span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span><br><span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span> 
 
</div>

scroll direction code द्वारा @Prateek

Answer 2

मूल रूप से आप 3 मुख्य विचारों का उपयोग कर इस मिल की जरूरत है।

1. सेट मेनू/हैडर तय करने के लिए।
2. जब नीचे स्क्रॉल, शीर्ष लेख/मेनू दूर करने के लिए एक वर्ग जोड़ें।
3. जब तक स्क्रॉल, वर्ग कि शीर्ष लेख/मेनू खाल को हटा दें।

यहाँ मेरियस Craciunoiu

एचटीएमएल से एक demo है:

<header class="nav-down"> 
    This is your menu. 
</header> 
<main> 
    This is your body. 
</main> 
<footer> 
    This is your footer. 
</footer> 

जावास्क्रिप्ट:

// Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('header').outerHeight(); 

$(window).scroll(function(event){ 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight){ 
     // Scroll Down 
     $('header').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
      $('header').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 

    lastScrollTop = st; 
} 

सीएसएस:

body { 
    padding-top: 40px; 
} 

header { 
    background: #f5b335; 
    height: 40px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
} 

.nav-up { 
    top: -40px; 
} 

main { 
    background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= 
    ) repeat; 
    height: 2000px; 
} 

footer { background: #ddd;} 
* { color: transparent}