非你网

效果页面

效果链接：

1. mailme https://mailmeapp.com/

2. 鲸鱼书单 http://www.miduapp.cn/

3. 百度百科史记 http://www.sucaihuo.com/jquery/1/175/demo/

日本直播：https://live.line.me/

实现js

mailme：

$(window).scroll(function() {
    if ($(".navbar").offset().top > 1) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

当然，你可以加更多的改变。

鲸鱼书单：

var header = new Headroom(document.getElementById("header"), {
    tolerance: 0,
    offset : 70,
    classes: {
      initial: "animated",
      pinned: "slideDown",
      unpinned: "slideUp"
    }
});
header.init();

这里使用的是第三方类库：headroom。

介绍：http://www.bootcss.com/p/headroom.js/

百度百科史记：

http://www.sucaihuo.com/jquery/1/175/demo/

这里使用了jqury以及jquery.easeing插件。其使用方法见下边链接。

http://www.jb51.net/article/86785.htm

http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html