Question

我正在尝试创建一个缩小的标题。我已经尝试了下面的示例，但是它不起作用。我向下滚动时要缩小标题元素。标头应逐像素缩小，并且如果其高度达到80像素，则应停止缩小。这是我想要的示例：https://kriesi.at/themes/enfold/

感谢您的帮助。

window.onscroll = function() {header_scroll()};

function header_scroll(){
  if (document.documentElement.scrollTop > 1 || document.body.scrollTop > 1 ) {
    document.getElementById('page').classList.add("smallheader");
  }
  else {
    document.getElementById('page').classList.remove("smallheader")
  }
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top:0;
    background-color: green;
    transition: 0.4s;
    z-index: 5;
}

.smallheader #header{
     height: 50px;
}

<div id="page">
  <div id="header">
      <p>content</p>
  </div>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>

Answer 1

这应该是您想要的行为

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 80) {
        $("#header").addClass("smallheader");
    } 
    else if ( scroll < 80 ) {
        $("#header").removeClass("smallheader");
    }
});

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top:0;
    background-color: green;
    transition: 0.4s;
    z-index: 5;
  }
  #header.smallheader {
     height: 80px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="header" onscroll="header_scroll()">
      <p>content</p>
      <p>content</p>
  </div>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
    <p>content</p>
  <p>content</p>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p><p>content</p>
</div>

Answer 2

我现在找到了自己的解决方案：

window.onscroll = function() {      

  var pixel = window.scrollY;
  var newheader = 200 - pixel; //100 is the high of the header i can't use document.getelementById         because there some weird problems
    
  if (newheader>70) { //70 its the smallest height of the header
    document.getElementById('header').setAttribute("style","height:"+newheader+"px");
  }
 }

#header{
    width: 100%;
    height: 200px;
    position: fixed;
    top:0;
    background-color: green;
}

<div id="page">
  <div id="header">
      <p>content</p>
  </div>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p> 
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>

JavaScript缩小标头

2 个答案: