Question

在我当前的代码中，页面加载时，白条标题位于顶部。滚动时，它消失，滚动到顶部时，白色标头又回来了。所以我取得了一些进展。我想要得到的是在滚动顶部时有一个透明的标题：（https://i.imgur.com/5DiVZpp.png）

对于白色的标头，主要的标头要保持粘性并一直向下移动，如下所示：（https://i.imgur.com/lhlGsW6.png）当您向上滚动时，它会淡出回到透明标题。

CSS：

#header{position:fixed;
       left:0;top:0;right:0;height:106px;z-index:100;
    -webkit-transition:background-color 0.2s ease-in-out;
        -moz-transition:background-color 0.2s ease-in-out;
        -ms-transition:background-color 0.2s ease-in-out;
        -o-transition:background-color 0.2s ease-in-out;
        transition:background-color 0.2s ease-in-out
}
#header .logo{position:absolute;left:0;top:0;width:162px;height:106px}
#header .logo a{display:block;position:absolute;left:50%;top:50%;
                margin:-30px 0 0 -60px;width:120px;height:60px;
                text-indent:-99999px;
                background-image:url("header_logo.png")}
#header.scroll{border-bottom:1px solid #ededed;background:#fff;} /* so this is the transparent header?
#header.scroll .logo a{background-image:url("header_logo_transp.png")}

Javascript：

$(window).scroll(function () {
   var sc = $(window).scrollTop()
   if (sc == 0) {
   $("#header").addClass("scroll");
   //document.removeElementbyId(header); when I put this line in, the header wasn't there when the page first loads up-- kind of what I want, but I want the secondary header to be up there when sc==0
   } 
   else {
   $("#header").removeClass("scroll");

    }
});

HTML：

<div id="header" class="scroll" style="top: 0px;">
        <h1 class="logo"><a href="#">WEBSITE</a></h1>
        <a href="#" title="Menu" class="btn_menu"></a>

Answer 1

您遇到的问题可能是由于“滚动”的性质。它不会获得每个像素值。稍微更改if语句以使其包括1作为检查将有助于确保在应有的时候添加和删除这些类。

示例：https://codepen.io/SROwl/pen/Mdbwpy

HTML：

<div class="container">
  <div class="nav top">Nav Top</div>
</div>

SCSS：

body {
  background: #000;
  padding: 0;
  margin: 0;
}
.container {
  height: 4000px;
}
.nav {
  background: lightgray;
  padding: 15px;
  height: 50px;
  width: 100%;
  border: 1px solid gray;
  transition:  250ms ease;
  &.top {
    color: #fff;
    background: transparent;
  }
  &.fixed {
    position: fixed;
    background: #fff;
  }
}

jQuery：

$(window).on('scroll', function(){
var  winTop = $(window).scrollTop(),
  if (winTop >= 1) {    
    $('.nav').addClass('fixed').removeClass('top');
  } else if (winTop <= 0) {    
    $('.nav').addClass('top').removeClass('fixed');    
  }
})

创建两个不同的标题-粘性/滚动标题和顶部标题

1 个答案: