Question

在node / express / backbone / stylus / dust中编写静态长滚动网站。

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

编码这样的代码的最佳方法是什么？我知道这是一个非常广泛的问题，而且我没有任何代码可以证实这个问题，但是我不确定我会用什么样的CSS /脚本组合来确保标题收缩，然后继续，然后移动国家之间。

Answer 1

使用jQuery，只需为scroll事件（http://api.jquery.com/scroll/）设置事件处理程序，然后调整标题的高度或其他任何你需要做的事情，具体取决于滚动的当前值是什么。您可以修改此代码并将其扔到您的页面上：

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

Answer 2

我的第一个想法是用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++){

这里检查视图中的元素 Check if element is visible after scrolling

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

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

2 个答案: