平滑scrollTop

Question

我有这个脚本，当用户滚动页面时，使标题向上滚动一点，它工作得很好。但是，我想让它平滑地滚动。我试着自己做，但我不太擅长java脚本。

<script>
window.onscroll=function () {
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    if(top > 50){document.getElementById("header").style.position = "fixed";
    document.getElementById("header").style.height="130px"
        }
        else {
        document.getElementById("header").style.position = "relative";
    document.getElementById("header").style.height="373px"
        }
}
</script>

下面是一个示例：jsfiddle.net/largan/FDEJp

任何帮助都是非常感谢的。谢谢

Answer 1

我建议你从一开始就使用position:fixed。浏览器已经为你做了一堆滚动计算，所以你肯定想要利用这一点。诀窍是根据滚动的位置平滑地移动元素。我使用margin-top来定位内容，并使用height来定位标题。我还清理了你的标记，以便更好地利用浏览器已经可以做的事情。请注意，我将标题和内容分开移动，他所做的是以一种更自然、更直观的方式移动标题。

标记

<div class="container">
  <div id="header"> 
    header
  </div>
  <div id="content">
    <p>...</p>
  </div>
</div>

CSS

.container {
  width: 100%;
  background-color: gray;
}    
#header {
  position: fixed;
  text-align: center;
  background: #880000;
  height: 203px;
  width: 100%;
  top: 0;
  left: 0;
}
#content {
  margin-top: 203px;
  margin-left: auto ;
  margin-right: auto ;
}

JS

window.onscroll = function () {
  var doc = document.documentElement,
      body = document.body,
      top = (doc && doc.scrollTop  ||
        body && body.scrollTop  ||
        0);
  if(top < 75) {
    document
      .getElementById('header')
      .style
      .height = (203 - top * 2) + "px";
  }
  if(top < 130) {
    document
      .getElementById('content')
      .style
      .marginTop = (203 - top) + "px";
  }
}

http://jsfiddle.net/FDEJp/2/

Answer 2

首先，我将对这两种情况使用固定的定位。下一步我要做的是，使用“switch”而不是“if”：

switch (top)
    {
        case 0:
            header.style.height="230px;
            break;
        case 1:
            header.style.height="228px";
            break;
        case 2:
            header.style.height="226px";
            break;
        case 3:
            header.style.height="224px";
            break;
        case 4:
            header.style.height="222px";
            break;
        case 5:
            header.style.height="220px";
            break;
        case 6:
            header.style.height="218px";
            break;
        case 7:
            header.style.height="216px";
            break;
        case 8:
            header.style.height="214px";
            break;
        case 9:
            header.style.height="212px";
            break;
        case 10:
            header.style.height="210px";
            break;
        case 11:
            header.style.height="208px";
            break;
        case 12:
            header.style.height="206px";
            break;
        case 13:
            header.style.height="204px";
            break;
        case 14:
            header.style.height="202px";
            break;
        case 15:
            header.style.height="200px";
            break;
        case 16:
            header.style.height="198px";
            break;
        case 17:
            header.style.height="196px";
            break;
        case 18:
            header.style.height="194px";
            break;
        case 19:
            header.style.height="192px";
            break;
        case 20:
            header.style.height="190px";
            break;
        default:
            header.style.height="130px";
            break;
    }

你可以看到，为了让我写起来更容易，我把结束高度改成了130像素，这样你每滚动一个'1 top‘，标题就会变短2个像素。我没有时间，所以我没有完成代码，也没有检查它，但是当你编写它并进行调整时，你应该有49个案例，我只写了20个。