如何隱藏並使用JavaScript顯示我的菜單？

我有這個腳本，當我向下滾動時，在我的導航欄中更改CSS屬性。（據100px的前後發生了改變。）如何隱藏並使用JavaScript顯示我的菜單？

$(window).scroll(function() {  
     var scroll = $(window).scrollTop(); 
     //console.log(scroll); 
     if (scroll >= 100) { 
      //console.log('a'); 
      $(".header").addClass("change"); 
     } else { 
      //console.log('a'); 
      $(".header").removeClass("change"); 
     } 
    });

我怎麼能隱藏資產淨值在滾動（1000像素）的一些點和部分（1500px）後再次表現出來？

來源

2016-11-22 Mauro Barrionuevo

你要顯示的'只有當'scrollTop'值是**正好**'1000px'和'1500px'時，nav'纔有效？ – choz

您是否看到了我給予的答案@Mauro –

如果您使用jQuery，請將問題標記爲這樣。 – 2016-11-22 04:50:29

這是你想做的事嗎？ https://jsfiddle.net/znw67k79/3/

$(window).scroll(function(){ 
    var myScroll = $(this).scrollTop(); 
    if (myScroll == 1000){ 
    $('nav').fadeOut('slow'); 
    } 
    if (myScroll == 1500){ 
     $('nav').fadeIn('slow'); 
    } 
})

來源

2016-11-22 02:08:20

像這樣的東西可以工作。請審查

if (scroll >= 1000 && scroll <= 1500) { 
 
    //console.log('a'); 
 
    $(".header").hide(); 
 
} else { 
 
    //console.log('a'); 
 
    $(".header").show(); 
 
}

來源

2016-11-22 02:08:22 RizkiDPrast

如需辦理滾動，延遲調用處理程序，以避免不必要的中間呼叫的方式，當滾動過程中：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>hide and show my menu with JavaScript</title> 
    <style type="text/css"> 
     .header 
     { 
      min-height: 50px; 
      position: fixed; 
     } 

     .header li { 
      float: left; 
      list-style: outside none none; 
      margin-right: 10px; 
     } 

     .content { 
      height: 10000px; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(document).bind('scroll', function (e) { 
       clearTimeout(this.scrollTimeout); 
       this.scrollTimeout = setTimeout(function() { 
        var currentTop = $(e.target).scrollTop(); 
        console.log(currentTop); 
        $('.header').toggle(currentTop < 1000 || currentTop > 1500); 
       }, 500); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="header"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
      <li>Item 6</li> 
      <li>Item 7</li> 
      <li>Item 8</li> 
      <li>Item 9</li> 
     </ul> 
    </div> 
    <div class="content"> 

    </div> 
</body> 
</html>

來源

2016-11-22 02:31:06

如何隱藏並使用JavaScript顯示我的菜單？

回答

相關問題