Question

我有这个脚本，当我向下滚动时会更改导航中的CSS属性。（它在100px之后发生变化。）

 $(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）隐藏导航并在该部分（1500px）之后再次显示？

Answer 1

这是你要做的事吗？ https://jsfiddle.net/znw67k79/3/

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

Answer 2

这样的事情可行。请查看

＆＃13;

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

＆＃13;

Answer 3

为了处理滚动，延迟调用处理程序是一种在滚动进行时避免不必要的中间调用的方法：

<!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>

如何使用JavaScript隐藏和显示我的菜单？

3 个答案: