.scroll() 无法正常工作

Question

所以我试图让我的 header 在页面向下滚动时出现，我想我可以用一个简单的 if 语句来做到这一点。但是，按照我的方式，它不会 'monitor' 滚动操作。我的意思是它会自动将 header 的高度设置为 0，没有别的，当页面向下滚动时它不会做任何事情。

我如何重写它以在顶部滚动位置为 0 时将 header 的高度设置为 0，并在向下滚动到一定程度时将高度设置为 80px？

$( document ).ready(function() {

        if ($(window).scroll(0)) {
            $( '#header' ).css( 'height', '0' );
        }
        else{
            $( '#header' ).css( 'height', '82px' );     
        }
});

Answer 1

滚动它：

 $( document ).ready(function() {
  $('header').hide();
  $(window).scroll(function(){
   if ($(window).scrollTop()<56){
    $('header').hide();
   }else{
    $('header').show();
   }
  });
 });

 header{
  background:#222;
  height:56px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
 }
 body{
  height:3000px
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>

Answer 2

$(window).scroll(... 将根据传递的参数将事件侦听器附加到滚动事件或触发滚动事件。它根本不用于获取元素的当前滚动位置（在给定的场景中，它总是 return window jQuery 对象，即 always 真实。）

我认为您想要做的是：

$( document ).ready(function() {
    if ( $(window).scrollTop() == 0 ) {
        $( '#header' ).css( 'height', '0' );
    }
    else{
        $( '#header' ).css( 'height', '82px' );     
    }
});

scrollTop() returns（第一个）元素已滚动的值（以像素为单位）。这意味着如果它等于 0，则元素滚动到顶部（或.. 取消滚动）

Answer 3

只是一个小动画，希望对您有所帮助：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() < 82) {
      $("#header").css({
        "height": 0,
        "border-bottom": "none"
      });
    } else {
      $("#header").css({
        "height": "82px",
        "border-bottom": "1px solid #333"
      });
    }
  });
});

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
}

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  border-bottom: none;
  background: rgba(0, 0, 0, 0.99);
  transition: 0.5s all ease;
  position: fixed;
  top: 0;
  width: 100%;
  color: #fff;
}

#content {
  line-height: 1.2;
  font-size: 5em; 
}

<div id="header">
  <h3>I'm a header</h3>
</div>
<div id="content">
  <h3>Scroll Down</h3>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo purus, tempor id lobortis eget, pretium id lectus. Nam sed lorem quis velit efficitur gravida vel et enim. Ut laoreet sit amet enim ut tincidunt. Nunc vitae consectetur quam, ac varius
  est. Ut ac sagittis nisi. Etiam luctus ullamcorper eros. Nam molestie consectetur risus, ac accumsan velit cursus efficitur. Phasellus porta neque ut arcu rutrum facilisis. Proin non imperdiet ante. Vestibulum elit augue, cursus et nulla id, volutpat
  tincidunt ex. Nullam vitae nibh odio. Curabitur convallis sapien sit amet hendrerit vulputate. Phasellus sagittis suscipit augue nec congue. Pellentesque condimentum, eros vel auctor dapibus, velit enim sagittis nibh, sit amet efficitur erat sapien
  ut turpis. Cras bibendum, ex ac elementum facilisis, neque libero lobortis nulla, id molestie lectus ex at felis. Praesent ut elementum dui, et vestibulum ipsum. Quisque in mi scelerisque, pharetra sem in, pellentesque ipsum. Nam ultrices, diam ac consectetur
  viverra, nisl neque varius ante, vehicula semper ipsum velit at tellus. Sed velit massa, luctus id elit ut, volutpat rutrum erat. Nulla eu ipsum mauris. Etiam dictum viverra dui vel tempor.
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.scroll() 无法正常工作

.scroll() not working like it should

javascript

jquery

scroll

jquery-animate