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 px，这样对于每滚动的“1 top”，标题将缩短为2像素。我没有时间，所以我没有完成代码，也没有检查它，但是当你写它并进行调整时，你应该有49个案例，我只写了20个。

平滑scrollTop

2 个答案:

标记

CSS

JS