滾動瀏覽某個div時如何使粘性導航更改顏色？
[英]How to make sticky navigation change colour when scrolling past a certain div?
問題描述
我很好奇當你向下滾動到頁面上的特定點或DIV時，如何使粘性導航欄淡入一種顏色。
我想擁有這個，所以當我滾動到div的末尾或div的開頭時，我可以看到白色背景上的白色。
我的一個問題是無法使JS工作，並且將我的背景圖像插入到我的css ... header {}中，寬度...我如何僅定位徽標（左側）和右邊的導航欄...所以在兩個下面出現一個透明條，占據了所需的高度和100％的頁面寬度，而不會弄亂背景圖像！
同樣在codepen中你會注意到改變顏色的標題...在主div下面。
這是我的代碼...
http://codepen.io/uchmanowicz/pen/qEebbN
謝謝！
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>
CSS
* {
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;
}
JS
$(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');
}
});
}
});
1 個解決方案
解決方案1
1 已采納 2015-04-14 16:42:28
我認為你的意思是粘性導航欄，當主要內容在滾動時到達時改變背景。 請參閱更新的代碼和筆演示，如下所示。
$(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) { $("nav").css('background-color', 'rgba(0,0,0,.75)'); } else { $('nav').css('background-color', 'transparent'); } }); } });
* { box-sizing: border-box; margin: 0; padding: 0; } body { background: #666; min-height: 5000px; } header { /* background-image: url('images/main.jpg'); */ background-position: center center; background-size: cover; position: relative; } nav { position: fixed; width: 100%; top: 0; right: 0; z-index: 1; letter-spacing: .2em; line-height: 1; padding: 30px; } nav ul { text-align: right; list-style: none; padding: 0; margin: 0; } nav li { padding: 0 10px; display: inline-block; } nav li:last-child { border-right: none; } nav li a { padding: 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; } .logo { width: 200px; display: block; float: left; 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; } .clears { clear: both; } .maintext { padding-top: 90px; margin: 200px auto; width: 600px; text-align: center; color: white; } .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; } .whatwedohd { 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.three { margin-right: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header> <nav> <a class="logo" href="#">Aesthetic</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="maintext"> <h1>We're Aesthetic</h1> <h2>A Visual Agency from Niagara</h2> </div> </header> <main> <h2 class="whatwedohd">Expertise</h2> <div class="whatwedobox one"></div> <div class="whatwedobox two"></div> <div class="whatwedobox three"></div> </main> <footer></footer>
筆演示： http ： //codepen.io/anon/pen/qEemdp
使用 position 時如何阻止 div 滾動過去 header； 黏？
[英]How to stop a div from scrolling past header when using position; sticky?
在網站的不同 div 上滾動時使 Bootstrap4 導航欄改變顏色
[英]Make Bootstrap4 Navigation bar change colour when scroll on different div of the website
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.