如果页面在中间滚动，则隐藏固定的顶部标题

Question

我已将标题固定在顶部，并固定位置，标题中有标识和菜单。我想问的是当用户滚动到中间时如何隐藏徽标。并且菜单会更换徽标？

这是我的HTML / CSS：

#header {
  position:fixed;
  width:100%;
}
.logo {
  background:#ccc;
}
.logo h2 {
  margin:0px;
}
.menu {
  background:red;
}
#konten {
  padding-top:50px;
}

<div id="header">
  <div class="logo">
    <h2>Example WEb</h2>
  </div>
  <div class="menu"><a href="#">HOME</a><a href="#">About</a><a href="#">Contact</a>
  </div>
</div>
<div id="konten">
  1abcdefghiabcdefghia
  <br>bcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcdefghiabc
  <br>defghiabcdefghiabcdefghiabcdefghiabcdefghiab
  <br>cdefghiabcdefghiabcdefghiabcdefghiabc
  <br>defghiabcdefghiabcdefghiabcdefghiabcdefghia
  <br>defghiabcdefghiab
  <br>cdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcdef
  <br>ghiabcdefghiabcdefghiabcdefghi
  <br>abcdefghiabcdefghiabcdefghiabcdefghiabcdef
  <br>ghiabcdefghiabcdefghiabcdefghiabcdef
  <br>ghiabcdefghiabcdefghiabcdefg
  <br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
  <br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefgh
  <br>iabcdefghiabcdefghiabcdefghi
  <br>abcdefghiabcdefghiabcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcdefgh
  <br>iabcdefghiabcdefghiabc
  <br>defghiabcdefghiabcdefg
  <br>hiabcdefghiabcdefghiabc
  <br>defghiabcdefghiabc
  <br>defghiabcdefghiabcdefg
  <br>hiabcdefghiabcde
  <br>fghiabcdefghiabcdef
  <br>ghiabcdefghiabcdefghi
  <br>abcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiab
  <br>cdefg
  <br>hiabcdefghiabcdefghia
  <br>bcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefg
  <br>hiabcdefghiabcdefghiabcdefghiab
  <br>cdefghiabcdefghiabcdefghiabcdefghiabcdefghiab
  <br>cdefghiabcdefghiabcdefghia
  <br>bcdefghiabcde
  <br>fghiabcdefghiabcdefghiabcde
  <br>fghiabcdefghiabcdefghiabcdef
  <br>ghiabcdefghiabcde
  <br>fghiabcdefghiabcdefghiabcdefgh
  <br>iabcdefghiabcdefghiabcdefghi
  <br>abcdefghiabcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
  <br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabc
  <br>defghiabcdefghiabcdefghiabcd
  <br>efghiabcdefghiabcdefghiabcdefg
  <br>hiabcdefghiabcdefghiabcde
  <br>fghiabcdefghiabcdefghiabc
  <br>defghiabcdefghiabcdefghia
  <br>bcdefghiabcdefghiabcdefghiabcde
  <br>fghiabcdefghiabcdefghi
</div>
<div id="footer">
</div>

外部JSFiddle

Answer 1

我希望这就是你想要的!!

$(window).scroll(function() {
     if ($(this).scrollTop() > 200) { //use `this`, not `document`
        $('.logo').css({
            'display': 'none'
        });
    }
    else
    {
           $('.logo').css({
            'display': 'block'
        });
    }
});

<强> Demo Here

将标题的CSS更改为下方，使其保持在顶部

#header {
  position:fixed;
  width:100%;
  top:0px;
}

Answer 2

当您标记Jquery时...可以使用jquery

完成

$(document).ready(function(){
    $(window).on('scroll',function(){
        var windowScroll = $(this).scrollTop();
        if(windowScroll >= ($(this).height())/2){
            $('.logo').slideUp(500);
        }else{
           $('.logo').slideDown(500);
        }
    });
});

JsFIDDLE