3
내 문제는 화면이 600px 미만이되면 navbar가 드롭 다운 navbar가됩니다. 이제 문제는 네비게이션 바 100 픽셀 아래로 스크롤 할 때 검은 색을 얻을 수 있다는 것입니다하지만 난 ... 검은 배경이 사라 드롭 다운 메뉴를 열고클릭시 배경색이 사라집니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="costume.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Connect stylesheet -->
<link rel="stylesheet" href="costume.scss">
</head>
<body>
<div class="topnav" id="myTopnav" align="left">
<a href=""><p>Home</p></a>
<a href=""><p>Portfolio</p></a>
<a href=""><p>About</p></a>
<a href=""><p>Impressum</p></a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div class="banner topnav"></div>
<div id="wrapper"></div>
<script>
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('div#myTopnav').addClass('scrolled');
} else {
$('div#myTopnav ').removeClass('scrolled');
}
});
});
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('a').addClass('scrolled2');
} else {
$('a').removeClass('scrolled2');
}
});
});
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
스타일 싶어 할 때
body {
margin: 0;
padding: 0;
height: 2000px;
}
.topnav{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
min-height: 100px;
transition: 0.35s all ease;
z-index: 1000;
overflow: hidden;
}
.topnav a {
display: inline-block;
margin: 20px 50px;;
list-style: none;
text-align: right;
text-decoration: none;
font-size: 17px;
transition: 0.35s all ease;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
}
.topnav a:hover {
text-decoration: none;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: fixed;
z-index: 1001;
}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
z-index: 1001;
}
.topnav.responsive a:hover {
padding-left: 10px;
color: white;
}
}
.banner {
background: url('https://images.unsplash.com/photo-1431492299426-
2ea1ce429cc0?ixlib=rb-
0.3.5&q=80&fm=jpg&crop=entropy&s=135705633ad6367a0565fceae4a57372');
background-position: center;
background-size: cover;
width: 100%;
min-height: 100vh;
z-index: 10;
position: absolute;
}
.scrolled {
min-height: 10px;
color: inherit;
background: black;
transition: 0.35s all ease-in-out;
opacity: 0.85;
}
.scrolled2 {
color: white;
opacity: 0.95;
.topnav a:hover {
background-color: red;
}
}
https://codepen.io/anon/pen/RVYmKZ < - 당신이 무슨 뜻인지 알 수 있도록 GIF가 https://jsfiddle.net/he7uhnya/
크롬 사용 https://gyazo.com/aa5c558cea87f645a32817cba5ff56db
... – Legionar
수 코드의 [JSfiddle] (https://jsfiddle.net/)을 생성합니까? 그러면 우리를 도와주는 것이 더 쉬워집니다. – Deathstorm
나는 링크를 추가했지만 크롬에서 열어 ... 아이러니하게도 일부는 파이어 폭스에서 항상 작동하지 않는다. 비록 나의 로컬 파일에 항상 파이어 폭스 –