JavaScriptを使用してメニューを非表示にするにはどうすればよいですか？

私は下にスクロールしたときにNavの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"); 
     } 
    });

にはどうすれば（1000px）スクロールのどこかの時点でNAVを非表示にすることができますし、（1500px）そのセクションの後に、再びそれを示して？

出典

2016-11-22 Mauro Barrionuevo

あなたが '表示したいです'scrollTop'値が**正確に' '1000px'と '1500px'の場合にのみ' nav'を実行しますか？ – choz

私は@Mauroの答えを見たのですか –

jQueryを使用している場合は、そのような質問にタグを付けてください。 –

これは何かしたいですか？ 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を使用してメニューを非表示にするにはどうすればよいですか？

答えて

関連する問題