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

您的javascript无效：

var header-wrap = $('#header-wrap');

您不能使用- char作为标识符名称。

您可以使用camelcase代替：

var headerWrap = $('#header-wrap');

将来，您应该查看浏览器的JS控制台（在大多数浏览器中打开调试工具 - F12）来检查错误 - 在这种情况下，您会得到一个非常明显的错误。

Answer 2

您的问题是您在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>

Answer 3

更改变量名称，因为在变量名中使用-会引发语法错误。

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

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

3 个答案: