2

我有这个脚本，当用户滚动页面时，它会使标题向上滚动一点，它工作正常。但是，我想让它平滑滚动。我试着自己做，但我对 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

任何帮助表示赞赏。谢谢

4

2 回答 2

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/

于 2013-09-22T19:59:08.563 回答
0

首先，我会为这两种情况使用固定定位。我要做的下一件事是使用“开关”而不是“如果”：

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 个顶部”，标题就会缩短 2 像素。我没有时间所以我没有完成代码，也没有检查它，但是当你编写它并进行调整时，你应该有49个案例，我只写了20个。

于 2013-09-22T12:36:33.660 回答