Я пытаюсь получить заголовок, чтобы изменить непрозрачность при прокрутке вниз страницы (но когда она вверху, непрозрачность должна быть 100%). Я пытался изменить JavaScript, но я не могу заставить его работать. Я думаю, проблема в том, что, возможно, он неправильно ссылается на div 'header-wrap'.

Какие-либо предложения?

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>
0
user3760941 6 Янв 2017 в 14:32

3 ответа

Лучший ответ

Ваша проблема заключалась в том, что вы использовали - в переменной 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>
1
Z-Bone 6 Янв 2017 в 11:37

Измените имя переменной, потому что использование - в имени переменной приводит к синтаксической ошибке.

 var headerWrap = $('#header-wrap');
 $(window).scroll(function() {
   headerWrap .addClass('scroll-opacity-change');
   if($(this).scrollTop() === 0) {
     headerWrap .removeClass('scroll-opacity-change');
   }
 });
0
Manoj Lodhi 6 Янв 2017 в 11:39

Ваш javascript недействителен:

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

Вы не можете использовать - char для имени идентификатора.

Вместо этого вы можете использовать camelcase:

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

В будущем вы должны искать в консоли своего браузера JS (открыть инструменты отладки - F12 в большинстве браузеров), чтобы проверить наличие ошибок - в этом случае вы получите довольно очевидную ошибку.

1
Ovidiu Dolha 6 Янв 2017 в 11:35