Question

这让我疯了，因为我有它工作，现在它不是，我有2个标题，当页面加载我想要一个被隐藏，这很容易，然后一旦用户滚动我想要其他标题显示它，然后当它们滚动回到顶部时，原始标题显示。

我认为window.pageyoffset存在问题，因为我把这个if语句放在了不执行的内容中。

<script>

    var secondHeader = $('.headerN').hide();

    function testScroll(){
        if(window.pageYOffset>50){
            secondHeader.fadeIn();
        }
        else if(window.pageYOffset == 0){
            secondHeader.fadeOut();
        }
    }
    window.onscroll=testScroll;

Answer 1

这就是你需要的：

$("#header-scroll").hide();
$(window).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $('#header-scroll').slideDown(500);
    $('#header-full').slideUp(500);
  } else {
    $('#header-scroll').slideUp(500);
    $('#header-full').slideDown(500);
  }
});

.header {
  border: 2px #3a3a3a solid;
  width: 97%;
  position: fixed;
  text-align:center;
  color: #3a3a3a;
  top: 0px;
}
#header-full {
  height: 100px;
  background-color: #FFF056;
  font-size:72px;
}
#header-scroll {
  height: 50px;
  background-color: #CBE32D;
  font-size:28px;
}
#content {
  height: 600px;
  width: 97%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-full" class="header">
  Full Header
</div>
<div id="header-scroll" class="header">
  Scroll Header
</div>
<div id="content"></div>

Answer 2

尝试使用以下代码。

$(window).scroll(function () {

            if ($(this).scrollTop() > 50) {

                $('.headerN').fadeIn();
            } else {
                $('.headerN').fadeOut();
            }
});

在滚动时显示不同的标题然后在滚动到顶部javascript / JQuery时隐藏它

2 个答案: