javascript - 向下滚动时标题不透明度不改变

Question

我试图让标题在向下滚动页面时更改不透明度(但当它位于顶部时，不透明度需要为 100%)。我尝试过更改 javascript，但无法让它工作。我认为问题可能是它没有正确引用“header-wrap”div。

有什么建议吗？

var headerWrap = $('#header-wrap');
$(window).scroll(function() {
    headerWrap.addClass('scroll-opacity-change');
    if($(this).scrollTop() === 0) {
        headerWrap.removeClass('scroll-opacity-change');
    }
});

body{
height:1000px;
}



/* Header */
#header-wrap{
	background:#D6ECFF;
	width:100%;
	height:auto;
	border-bottom: 1px solid #CCC;
	background:#CC0;/* delete */
	position:fixed;
	top:0;/* may not be needed but no harm in having */
	z-index:100000;
	/* margin:0 auto; needed? */
}
.scroll-opacity-change{
	opacity:0.6;
}
#header-top{
	/* contains logo & title text */
	width:960px;
	height:auto;
	margin:0 auto; /* aligns centrally */
	padding:10px 0 10px 0;
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-top-content-wrap{
	width:auto;
	height:auto;
	padding:0 0 0 0;
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-text-wrap{
	width:auto;
	height:auto;
	text-align:justify;
	float:left;
	/* The below apparently makes the text (all lines) justified, but not in safari */
	text-align-last:right;
	-moz-text-align-last: justify; /* For Firefox */
}
.header-logo-wrap{
	width:auto;
	height:auto;
	text-align:justify;
	float:left;
	padding-right:48px; /* changed from 50px for web safe reasons e.g. if one browser displays a larger font than another then it may cause the width to exceed 960px - could change back if logo is narrower */
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
#header-right-wrap{
	width:auto;
	height:auto;
}
.header-navigation-link{
	width:auto;
	height:auto;
	float:left;
	margin-left: 48px; /* changed from 50px for web safe reasons e.g. if one browser displays a larger font than another then it may cause the width to exceed 960px - could change back if logo is narrower */
	font-size:20px;
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	color:#333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-wrap">
  <div id="header-top">
    <div class="header-top-content-wrap">
      <div class="header-logo-wrap"><img src="images/logo.jpg" width="95" height="50"  alt="logo"/></div>
      <div class="header-text-wrap">
        <header>Business title name here</header>
        <slogan>slogan text here</slogan>
      </div>
    </div>
    <div id="header-right-wrap">
    <div class="header-navigation-link">Services</div>
    <div class="header-navigation-link">About</div>
    <div class="header-navigation-link">Contact</div>
    </div>
  </div>
</div>

Answer 1

你的问题是你在js变量中使用了-..

试试这个:

var headerWrap = $('#header-wrap');
$(window).scroll(function() {
    headerWrap.addClass('scroll-opacity-change');
    if($(this).scrollTop() === 0) {
        headerWrap.removeClass('scroll-opacity-change');
    }
});

body {
  height: 1000px;
}
#header-wrap{
	background:#D6ECFF;
	width:100%;
	height:100px;
	border-bottom: 1px solid #CCC;
	background:#CC0;/* delete */
	position:fixed;
	top:0;/* may not be needed but no harm in having */
	z-index:100000;
	/* margin:0 auto; needed? */
}
.scroll-opacity-change{
	opacity:0.6;
}

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