Javascript html5：变成导航栏的动态标题

在node/express/backbone/stylus/dust中对静态长卷网站进行编码

我们将有一个~400px的标题图像，它位于页面顶部的固定位置，然后向下滚动时缩小为~100px导航条，然后在通过页面的各个部分时在几个状态之间移动

---

编写这样的代码的最佳方式是什么？我知道这是一个非常广泛的问题，我没有任何代码来证实这个问题，但我不确定我会使用什么CSS/脚本组合来确保标题收缩，然后保持，然后在状态之间移动。

使用jQuery，只需为

滚动

事件（）设置一个事件处理程序，然后根据滚动条的当前值调整标题的高度或其他需要执行的操作。您可以修改此代码并将其放到页面上：

<script>

  $(window).scroll(function(){
    var $header = $('header');
    var scrollY = $(this).scrollTop();

    if (scrollY < 100){
      $header.css('height', '400px');
    } elseif(scrollY > 100 && scrollY < whatever){
      $header.css('height', '100px');
    } elseif( your next range here ){
      ...
    }

</script>

$（窗口）。滚动（函数（）{
变量$header=$（'header'）；
var scrollY=$（this.scrollTop（）；
如果（滚动<100）{
$header.css（'height'，'400px'）；
}elseif（滚动>100&&scrollY<任何内容）{
$header.css（'height'，'100px'）；
}elseif（您在此的下一个范围）{
...
}

我的第一个想法是用javascript制作动画 一些伪代码

body
   div long text
   div.navigation(data-navigation="shrink") at the beginning this div is outside of the screen are
   div other long text   
   div.navigation(data-navigation="changeElements") i am somewhere

   script.

$( window ).scroll(function() {
   // get all data-navigation elements
   var allNavigationElements = $('.navigation'), i;
   for(i = 0; i < allNavigationElements.length; i++){

---

你在使用jQuery吗？是的，客户端是jQuery/lodash/backbone/dust/stylus。有一个脚手架设置，可以自动为我提供

索引、coffee

、

style.styl

和

模板。dust

每个主干视图，这是一个。啊，这让我走上了正确的轨道，谢谢大家。

      if(inview){
         changeNavigationTo($element.data('navigation')
      }
   }
}