Question

我创建了一个普通的页面，其中包含标题部分中的标题和菜单。现在我想向下滚动，在向下滚动时我想修改标题部分。我已经编写了成功的代码，但它不起作用，并且它没有修改标题。我怎样才能解决这个问题？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<style type="text/css">
    body{ margin: 0px; text-align: center; }
    #pagetop{
        position: fixed;
        top: 0px;
        width: 100%;
        height: 120px;
        background: #06C;
        color: #FFF;
        font-size: 23px;
        padding-top: 50px;
        transition: height 1.3s linear 1s, padding 0.3s linear 0s;
        overflow: hidden;
    }
    #pagetop > #menu {
        position: absolute;
        bottom: 0px; 
        width: 100%;
        background: #004A95;
        height: 50px; 
        transition: height 0.3s linear 0s;
    }
    #wrapper { margin-top:200px; }
</style>
<script >window.addEventListener("scroll",yScroll);
    var pagetop , menu, yPos;
    function yScroll(){
        pagetop= document.getElementById('pagetop');
        menu=document.getElementById('menu');
        yPos=document.PageYOffset;

        if(yPos > 10){
            pagetop.style.height="36px";
            pagetop.style.paddingTop="8px";
            menu.style.height="0px";
        }
        else {
            pagetop.style.height="120px";
            pagetop.style.paddingTop="50px";
            menu.style.height="50px";
        }
    }

</script>
</head>
<body>
    <div id="pagetop">
    Header
    <div id="menu">menu system</div>
    </div>
    <div id="wrapper">
    <script type="text/javascript">
        for(var i=0; i<40;i++){document.write("<h2>"+(i+1)+".Dummy page content...</h2>");}
    </script>
    </div>
</body>
</html>

Answer 1

您需要将此行document.pageYOffset修改为window.pageYOffset。 pageYOffset和pageXOffset适用于窗口而不是文档正文。

＆＃13;

body {
  margin: 0px;
  text-align: center;
}

#pagetop {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 120px;
  background: #06C;
  color: #FFF;
  font-size: 23px;
  padding-top: 50px;
  transition: height 1.3s linear 1s, padding 0.3s linear 0s;
  overflow: hidden;
}

#pagetop>#menu {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #004A95;
  height: 50px;
  transition: height 0.3s linear 0s;
}

#wrapper {
  margin-top: 200px;
}

＆＃13;

<script>
  window.addEventListener("scroll", yScroll);
  var pagetop, menu, yPos;

  function yScroll() {
    pagetop = document.getElementById('pagetop');
    menu = document.getElementById('menu');
    yPos = window.pageYOffset;

    if (yPos > 10) {
      pagetop.style.height = "36px";
      pagetop.style.paddingTop = "8px";
      menu.style.height = "0px";
    } else {
      pagetop.style.height = "120px";
      pagetop.style.paddingTop = "50px";
      menu.style.height = "50px";
    }
  }
</script>
</head>

<body>
  <div id="pagetop">
    Header
    <div id="menu">menu system</div>
  </div>
  <div id="wrapper">
    <script type="text/javascript">
      for (var i = 0; i < 40; i++) {
        document.write("<h2>" + (i + 1) + ".Dummy page content...</h2>");
      }
    </script>
  </div>
</body>

</html>

＆＃13;

向下滚动我想要标题部分修改并变得矮小，填充等

1 个答案: