Fatal编程技术网
  • javascript/
  • Javascript 当滚动经过某个div时，如何使粘性导航改变颜色？

Javascript 当滚动经过某个div时，如何使粘性导航改变颜色？

javascript html css

Javascript 当滚动经过某个div时，如何使粘性导航改变颜色？,javascript,html,css,Javascript,Html,Css,我很好奇，当你向下滚动到页面上的某个点或DIV时，如何使你的粘性导航条褪色 我想有这个，这样我可以看到白色背景上的白色，当我滚动到我的div结束或在div开始 我的问题之一是无法让JS正常工作，也无法将背景图像插入css。。。标题{}，宽度为。。。我如何只针对徽标（左侧）和导航栏（右侧）。。。因此，一个透明的条出现在两个下方，占据了所需的高度和100%的页面宽度，而不会弄乱背景图像 同样在codepen中，您会注意到标题。。。它改变了主div下面的颜色 这是我的密码笔 谢谢大家! HTML &

我很好奇，当你向下滚动到页面上的某个点或DIV时，如何使你的粘性导航条褪色

我想有这个，这样我可以看到白色背景上的白色，当我滚动到我的div结束或在div开始

我的问题之一是无法让JS正常工作，也无法将背景图像插入css。。。标题{}，宽度为。。。我如何只针对徽标（左侧）和导航栏（右侧）。。。因此，一个透明的条出现在两个下方，占据了所需的高度和100%的页面宽度，而不会弄乱背景图像

同样在codepen中，您会注意到标题。。。它改变了主div下面的颜色

这是我的密码笔

谢谢大家!

HTML

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="styles.js"></script>
</head>

<body>

<header>

    <a class="logo" href="#">Aesthetic</a>

    <nav>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </nav

    <div class="clears"></div>

    <div class="maintext">

        <h1>We're Aesthetic</h1>
        <h2>A Visual Agency from Niagara</h2>

    </div>

</header>

<main>

<h2 class="whatwedo">Expertise</h2>
<div class="whatwedobox one"><div class="icon"></div><p>Lorem ipsum dolor sit  amet.</p></div>
<div class="whatwedobox two"></div>
<div class="whatwedobox three"></div>

</main>

<footer></footer>

<script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">          </script>
</body>
</html>
JS

* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

body {
background: white;
}

header {
width: 100%;
height: 550px;
background: white;
background: url('images/main.jpg') center center;
background-size: cover;
padding: 30px 30px 30px 30px;
position: relative;
}

.logo {
position: fixed;
top: 33px;
left: 30px;
width: 200px;
height: 80px;
display: block;
float: left;
z-index: 30;
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;  
}

.logo a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}

nav {
float: right;
z-index: 30;
position: fixed;
top: 20px;
right: 0px;
letter-spacing: .2em;
}

nav li {
float: left;
list-style: none;
padding: 10px 15px 10px 15px;
}

nav li:last-child {
border-right: none;
}

nav li a {
padding: 5px 10px 5px 10px;
color: white;
display: block;
font-weight: 400;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}

nav li a:hover {
background-color: rgba(40, 40, 40, 0.5);
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}

.clears {
clear: both;
}

.maintext {
margin: auto;
width: 600px;
text-align: center;
margin-top: 200px;
color: white;
z-index: 30;
position: relative;
}

.maintext h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

.maintext h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

main {
max-width: 1180px;
margin: auto;
margin-top: 20px;
overflow: hidden;
}

h2.whatwedo {
text-align: center;
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased;
}

.whatwedobox {
width: 30%;
height: 300px;
border: 1px solid blue;
float: left;
margin-right: 5%;
padding: 20px;
margin-top: 20px;
}

.whatwedobox:last-child {
margin-right: 0%;
}

.icon {
width: 100%;
height: 100px;
background: url(#) no-repeat center center;
}

$(document).ready(function(){       
var scroll_start = 0;
var startchange = $(".maintext");
var offset = startchange.offset();

 if (startchange.length){
 $(document).scroll(function() { 
  scroll_start = $(this).scrollTop();
  if(scroll_start > offset.top) {
      $("header").css('background-color', '#B5B5B5');
   } else {
      $('header').css('background-color', 'transparent');
   }
});
}
});
我想你想要的是粘性导航条，当主要内容到达滚动条时，改变背景。请参阅更新的代码和钢笔演示，如下所示

$（文档）.ready（函数（）{
var scroll_start=0；
var startchange=$（“.maintext”）；
var offset=startchange.offset（）；
if（起始更改长度）{
$（文档）。滚动（函数（）{
scroll_start=$（this.scrollTop（）；
如果（滚动开始>偏移量顶部）{
$（“nav”）.css（'background-color'，'rgba（0,0,0,75）'）；
}否则{
$（'nav'）.css（'background-color'，'transparent'）；
}
});
}
});

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景:#666；
最小高度：5000px；
}
标题{
/*背景图片：url（'images/main.jpg'）*/
背景位置：中心；
背景尺寸：封面；
位置：相对位置；
}
导航{
位置：固定；
宽度：100%；
排名：0；
右：0；
z指数：1；
字母间距：2米；
线高：1；
填充：30px；
}
导航ul{
文本对齐：右对齐；
列表样式：无；
填充：0；
保证金：0；
}
李海军{
填充：0 10px；
显示：内联块；
}
李导航：最后一个孩子{
边界权：无；
}
李娜{
填充：10px；
颜色：白色；
显示：块；
字体大小：400；
文字装饰：无；
颜色：#FFFFFF；
字体系列：'Raleway'，无衬线，Helvetica，Verdana；
文本转换：大写；
-webkit字体平滑：抗锯齿；
}
导航李a：悬停{
背景色：rgba（40,40,40,0.5）；
-moz过渡：全部.3s轻松；
-o-过渡：全部3秒轻松；
-ms过渡：全部。3秒轻松；
-过渡：全部。3秒轻松；
-webkit过渡：所有.3s轻松；
-webkit字体平滑：抗锯齿；
}
.标志{
宽度：200px；
显示：块；
浮动：左；
字号：1.8em；
字号：800；
文字装饰：无；
颜色：#FFFFFF；
字体系列：'Raleway'，无衬线，Helvetica，Verdana；
文本转换：大写；
字体大小：粗体；
字母间距：5px；
}
.标志a{
字号：1.8em；
字号：800；
文字装饰：无；
颜色：#FFFFFF；
字体系列：'Raleway'，无衬线，Helvetica，Verdana；
文本转换：大写；
字体大小：粗体；
字母间距：5px；
}
.清除{
明确：两者皆有；
}
.maintext{
填充顶部：90px；
利润率：200px自动；
宽度：600px；
文本对齐：居中；
颜色：白色；
}
.maintexth1{
字号：600；
字号：1.8em；
线高：1.2米；
文本转换：大写；
字母间距：.1米；
颜色：#FFFFFF；
字体系列：'Raleway'，无衬线，Helvetica，Verdana；
垫底：15px；
}
.maintexth2{
字体大小：400；
字体大小：1.7em；
线高：1.2米；
文本转换：大写；
字母间距：.1米；
文本对齐：居中；
颜色：#FFFFFF；
字体系列：'Raleway'，无衬线，Helvetica，Verdana；
垫底：15px；
}
主要{
最大宽度：1180px；
保证金：自动；
边缘顶部：20px；
溢出：隐藏；
}
.什么{
文本对齐：居中；
字体大小：400；
字体大小：1.7em；
线高：1.2米；
文本转换：大写；
字母间距：.1米；
颜色：#000000；
字体系列：'Raleway'，无衬线，Helvetica，Verdana；
-webkit字体平滑：抗锯齿；
}
.什么盒子{
宽度：30%；
高度：300px；
边框：1px纯蓝色；
浮动：左；
保证金权利：5%；
填充：20px；
边缘顶部：20px；
}
.什么样的盒子{
右边距：0；
}




    

  • 

  • 

  • 

  • 


我们是审美的
来自尼亚加拉的视觉机构
专业知识