Question

所以我试图在页面向下滚动时显示标题，我想我可以使用简单的if语句来实现。但是，按照我的方式，它不会“监控”滚动操作。我的意思是它自动将标题的高度设置为0而不是其他任何东西，当页面向下滚动时它不会做任何事情。

如何在顶部滚动位置为0时重写此标题以将标题的高度设置为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(...会将事件侦听器附加到scroll事件或触发scroll事件，具体取决于传递的参数。它根本不用于获取元素的当前滚动位置（在给定的场景中，它总是返回window jQuery对象，总是 truthy。）

我相信您要做的是以下内容：

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

scrollTop()返回（第一个）元素滚动的值（以像素为单位）。这意味着如果它等于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（）不能正常工作

3 个答案: