반응형
스크롤 후 탐색 모음 색을 변경하시겠습니까?
배경색이 없는 내비게이션 바를 어떻게 설정합니까?
때 . (위에 .)navbar-fixed-top부트스트랩)
몇 가지 튜토리얼을 시도해 보았지만 성공하지 못했습니다.
이것은 웹사이트 http://attafothman.olympe.in/ 입니다.
위에 있는 검은색 내비게이션 바를 말하는 겁니다.
창 스크롤 후에 탐색 모음 색을 변경하는 가장 간단한 방법은 다음과 같습니다.
헤드에 다음 JS 추가:
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
그리고 이 CSS 코드.
.navbar-fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
스크롤이 navbar 높이를 초과하면 고정 navbar의 배경색이 흰색으로 변경됩니다.
JsFiddle 팔로우 참조
이것은 간단하고 순수한 자바스크립트입니다.
const nav = document.getElementById('mynav');
window.onscroll = function () {
if (document.body.scrollTop >= 200 ) {
myNav.classList.add("nav-colored");
myNav.classList.remove("nav-transparent");
}
else {
myNav.classList.add("nav-transparent");
myNav.classList.remove("nav-colored");
}
};
일부 Chrome 버전에는 다음과 관련된 버그가 있습니다.
document.body.scrollTop
따라서 다음과 같은 조건을 추가할 수 있습니다.
if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 )
물론입니다, 당신은 CSS 수업이 두 개 있어야 합니다.
.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}
업데이트: 더 나은 솔루션
for performance reasons and because listening to scroll event is not the best way to do this, here's a better solution using the: 교차로 관찰자 API
헤더 섹션(히어로 섹션)이 있고, 사용자가 이 헤더 섹션의 끝까지 스크롤할 때 내비게이션 색상을 변경하고 싶다고 가정해 보겠습니다.
const nav = document.getElementById('mynav');
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;
function updateNavColor(entries) {
const [entry] = entries;
if(!entry.isIntersecting) {
nav.classList.add("nav-colored");
nav.classList.remove("nav-transparent");
} else {
nav.classList.add("nav-transparent");
nav.classList.remove("nav-colored");
}
}
const headerObserver = new IntersectionObserver(updateNavColor, {
root: null,
threshold: 0,
rootMargin: `-${navHeight}px`
});
headerObserver.observe(header)
다음은 jsfidle 예입니다.Jquery를 사용하여 스크롤 픽셀 위치를 기준으로 배경색을 변경합니다.
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
저는 이 해결책이 오래된 답변보다 짧고 단순하다고 생각합니다.JS 코드입니다. 코드입니다.
const navbar = document.querySelector('.nav-fixed');
window.onscroll = () => {
if (window.scrollY > 300) {
navbar.classList.add('nav-active');
} else {
navbar.classList.remove('nav-active');
}
};
그리고 나의 css:
header.nav-fixed {
width: 100%;
position: fixed;
transition: 0.3s ease-in-out;
}
.nav-active {
background-color:#fff;
box-shadow: 5px -1px 12px -5px grey;
}
오늘 저는 스크롤할 때 navbar 배경색을 변경하는 방법에 대해 같은 질문을 했습니다.그리고 저는 CSS만 사용하고, jquery나 bootstrap이나 javascript는 사용하지 않는 해결책을 찾고 있었습니다.그러나 CSS로만 아직 수행할 수 없다는 것이 밝혀졌습니다(2019년 12월 현재).그리고 다른 기술보다 js를 사용하는 것이 훨씬 더 복잡하지 않다면 jquery나 부트스트랩 대신 javascript라는 핵심 기술을 고수할 것입니다.하지만 다행히도 그렇지 않습니다.
코드는 다음과 같습니다.
그것은 사용합니다.onscroll/scroll의 window이벤트 수신기를 트리거합니다.
리스너에서는 사트수에용서신을 합니다.pageYOffset/scrollYwindow스크롤 상태를 확인합니다.
브라우저 지원 기능은 다음과 같습니다.
https://caniuse.com/ #search=페이지YOffset
https://caniuse.com/ #search=searchY
var navbar = document.querySelector('nav')
window.onscroll = function() {
// pageYOffset or scrollY
if (window.pageYOffset > 0) {
navbar.classList.add('scrolled')
} else {
navbar.classList.remove('scrolled')
}
}body {
margin: 0;
padding: 0;
background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;
}
nav {
position: -webkit-sticky;
position: sticky;
/* sticky or fixed are fine */
position: fixed;
top: 0;
height: 69px;
width: 100%;
background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */
transition: background .5s; /* control how smooth the background changes */
}
nav.scrolled {
background: #0a0a0a;
}
main {
height: 200vh;
}<nav></nav>
<main></main><script>
$(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
$(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
</script>
이 작업은 jQuery를 사용하여 수행할 수 있습니다.
여기 바이올린에 대한 링크가 있습니다.
창이 스크롤되면 창의 위쪽과 창의 높이 사이의 거리가 비교됩니다.if 문이 참이면 배경색이 투명으로 설정됩니다.그리고 다시 맨 위로 스크롤하면 색이 흰색으로 돌아옵니다.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".menu").css({"background-color":"transparent"});
}
else{
$(".menu").css({"background-color":"white"});
}
})
})
교차로 관찰자 API는 어떻습니까?이렇게 하면 스크롤 이벤트를 사용할 수 있는 잠재적인 느린 속도를 방지할 수 있습니다.
HTML
<nav class="navbar-fixed-top">Navbar</nav>
<main>
<div class="content">Some content</div>
</main>
CSS
.navbar-fixed-top--스크롤하면 탐색 막대 배경색이 변경됩니다.아래로 스크롤할 때 컨텐츠 div가 더 이상 100% 표시되지 않을 때 탐색 모음에 추가됩니다.
.navbar-fixed-top {
position: sticky;
top: 0;
height: 60px;
}
.navbar-fixed-top--scrolled {
/* change background-color to whatever you want */
background-color: grey;
}
제이에스
내용이 브라우저 뷰포트와 완전히 교차하는 시기를 결정하기 위해 관찰자를 작성합니다.
콜백 함수의 이름은 다음과 같습니다.
- 관찰자에게 처음으로 대상 요소를 관찰하도록 요청한 경우
- 콘텐츠 div가 더 이상 완전히 표시되지 않는 경우(임계값: 1로 인해)
- 콘텐츠 div가 완전히 표시될 때(임계값: 1로 인해)
isIntersecting은 내용 div(대상 요소)가 관찰자의 루트(기본적으로 브라우저 뷰포트)와 완전히 교차하는지 여부를 나타냅니다.
// callback function to be run whenever threshold is crossed in one direction or the other
const callback = (entries, observer) => {
const entry = entries[0];
// toggle class depending on if content div intersects with viewport
const navBar = document.querySelector('.navbar-fixed-top');
navBar.classList.toggle('navbar-fixed-top--scrolled', !entry.isIntersecting);
}
// options controls circumstances under which the observer's callback is invoked
const options = {
// no root provided - by default browser viewport used to check target visibility
// only detect if target element is fully visible or not
threshold: [1]
};
const io = new IntersectionObserver(callback, options);
// observe content div
const target = document.querySelector('.content');
io.observe(target);
교차로 관찰자 옵션
현재 탐색 막대는 내용 디비가 화면 밖으로 이동하기 시작할 때 배경색을 변경합니다.
사용자가 스크롤하는 즉시 배경을 변경하려면 rootMargin 속성(위, 오른쪽, 아래, 왼쪽)을 사용하여 상단 여백을 탐색 막대의 높이를 음수로 설정합니다(이 경우 60px).
const options = {
rootMargin: "-60px 0px 0px 0px",
threshold: [1]
};
CodePen에서 위의 모든 작업을 확인할 수 있습니다.케빈 파월도 이에 대해 좋은 설명을 하고 있습니다(기허브 & 유튜브).
window.addEventListener('scroll', function (e) {
var nav = document.getElementById('nav');
if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
nav.classList.add('nav-colored');
nav.classList.remove('nav-transparent');
} else {
nav.classList.add('nav-transparent');
nav.classList.remove('nav-colored');
}
});
이벤트 수신기를 사용하는 최선의 방법입니다.특히 Firefox 브라우저의 경우 이 문서를 확인하십시오. Scroll-linked effects and Firefox는 더 이상 지원되지 않습니다.document.body.scrollTop 용할수 대안있을 .document.documentElement.scrollTop이상으로 야히야 에삼의 답변이 완료되었습니다.
위의 답변에 약간의 변화가 있지만 Vanilla JS의 경우:
var nav = document.querySelector('nav'); // Identify target
window.addEventListener('scroll', function(event) { // To listen for event
event.preventDefault();
if (window.scrollY <= 150) { // Just an example
nav.style.backgroundColor = '#000'; // or default color
} else {
nav.style.backgroundColor = 'transparent';
}
});
- 그래서 나는 querySelector를 사용하여 navbar를 얻습니다.
- 스크롤 Y 속성을 추적하기 위해 스크롤 이벤트를 창에 추가했습니다.
- 50보다 높은지 확인한 다음 활성 클래스를 navbar에 추가합니다. 그렇지 않으면 이미 포함되어 있으면 제거하기만 하면 조건이 더 조정되고 단순화될 수 있습니다.
당신을 돕기 위해 이 코드펜을 만들었어요!
const navbar = document.querySelector('#nav')
window.addEventListener('scroll', function(e) {
const lastPosition = window.scrollY
if (lastPosition > 50 ) {
navbar.classList.add('active')
} else if (navbar.classList.contains('active')) {
navbar.classList.remove('active')
} else {
navbar.classList.remove('active')
}
})
저는 언더스코어와 함께 제공되는 워드프레스를 사용합니다.따라서 테마 스크립트를 등록할 때는 종속성 배열의 핸들로 'jquery'와 'underscore'를 사용합니다.WordPress를 사용하지 않는 경우 스크립트 전에 jQuery 프레임워크와 언더스코어를 모두 로드해야 합니다.
코드펜: https://codepen.io/carasmo/pen/ZmQQYy
이 데모를 만들려면 jQuery와 언더스코어가 모두 필요합니다.
HTML:
<header class="site-header">
<div class="logo">
</div>
<nav>navigation</nav>
</header>
<article>
Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling
</article>
CSS:
body,
html {
margin: 0;
padding: 0;
font: 100%/180% sans-serif;
background: #eee;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
article {
height: 2000px;
padding: 5%;
background: #fff;
margin: 2% auto;
max-width: 900px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
}
.site-header {
background: #fff;
padding: 20px 5%;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.23);
transition: all .5s ease-in-out;
-web-kit-position: sticky;
position: sticky;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo {
background-image: url('the-path-to-the-logo.svg');
background-repeat: no-repeat;
background-position: center center;
width: 200px;
height: 60px;
background-size: contain;
transition: width .5s ease-in-out, height .5s ease-in-out;
}
.site-header nav {
text-align: right;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
}
.site-header.is-scrolling {
opacity: .8;
background: tomato;
padding: 10px 5%;
}
.site-header.is-scrolling .logo {
height: 40px;
width: 100px;
}
jQuery:
( function( window, $, undefined ) {
'use strict';
////////////// Begin jQuery and grab the $ ////////////////////////////////////////
$(document).ready(function() {
function is_scrolling() {
var $element = $('.site-header'),
$nav_height = $element.outerHeight( true );
if ($(this).scrollTop() >= $nav_height ) { //if scrolling is equal to or greater than the nav height add a class
$element.addClass( 'is-scrolling');
} else { //is back at the top again, remove the class
$element.removeClass( 'is-scrolling');
}
}//end is_scrolling();
$(window).scroll(_.throttle(is_scrolling, 200));
}); //* end ready
})(this, jQuery);
우선 HTML 파일이나 사용 중인 파일에 Jquery를 포함시켜야 합니다.
파일의 머리 부분에 스크립트 코드 공간을 만들고 아래 코드를 포함합니다.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$(".navbar").css({"background-color":"black"});
}
else{
$(".navbar").css({"background-color":""});
}
})
})
코드가 말하는 이것과 함께. ($(window).scrollTop() > 100)100은 "오프라인"에 있으므로 함수가 호출되는 높이를 지정할 수 있습니다.
이 코드 라인$(".navbar").css({"background-color":"black"}); Nav 요소의 클래스 이름을 바꿀 수 있습니다.이것은 CSS에 직접 액세스한 다음 CSS를 편집하는 것입니다.
아래 HTML 코드
<header class="hero">
<nav class="navbar ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="" alt=""> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TV shows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News and Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My List</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
저는 최근에 위의 예들 중 일부와 약간 다르게 그것을 수행했기 때문에 비록 매우 늦었지만 공유하려고 생각했습니다!
먼저 HTML의 경우 헤더 내에 클래스가 하나만 있습니다.
<body>
<header class="GreyHeader">
</header>
</body>
그리고 CSS:
body {
height: 3000px;
}
.GreyHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.FireBrickRed {
height: 100px;
background-color: #b22222;
position: fixed;
top:200;
width: 100%;
}
.transition {
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
HTML은 클래스 .greyHeader만을 사용하지만 CSS 내에서 스크롤이 위에서 특정 지점에 도달하면 호출할 다른 클래스를 만들었습니다.
$(function() {
var header = $(".GreyHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('GreyHeader').addClass("FireBrickRed ");
header.addClass("transition");
} else {
header.removeClass("FireBrickRed ").addClass('GreyHeader');
header.addClass("transition");
}
});
});
이 바이올린 체크하기: https://jsfiddle.net/29y64L7d/1/
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() >1290 ) {
$(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)");
}else if ($(document).scrollTop() >850) {
$(".navbar-fixed-top").css("background-color", "black");
}else if ($(document).scrollTop() >350) {
$(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)");
}
else {
$(".navbar-fixed-top").css("background-color", "red");
}
});
});@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans);
body {
font-family: "Roboto Slab", sans-serif;
position: relative;
}
h1,
h2,
h3,
h4 {
font-family: "Open Sans", sans-serif;
}
.main {
padding-top: 50px;
}
#home {
padding-top: 20%;
background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s31.postimg.org/l5q32ptln/coffee_cup_mug_apple.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
position: relative;
height: 100vh;
}
#home h2 {
color: white;
font-size: 4em;
}
#home h4 {
color: white;
font-size: 2em;
}
#home ul {
list-style-type: none;
text-align: center;
}
#home li {
padding-bottom: 12px;
padding-right: 12px;
display: inline;
}
#home li:last-child {
padding: 0;
}
@media (max-width: 710px) {
#home li {
display: block;
}
}
.img-style {
height: 200px;
width: 200px;
margin-top: 50px;
}
#about {
height: 100vh;
padding-top: 10%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s32.postimg.org/sm6o6617p/photo_1432821596592_e2c18b78144f.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
position: relative;
color: white;
}
#about p,
li {
font-size: 17px;
}
.navbar.color-yellow {
background-color: yellow;
height: 50px;
color: yellow;
}
.navbar.color-change {
background-color: #f45b69;
height: 50px;
color: rgba(255, 254, 255, 0.8);
}
#portfolio {
padding-top: 30px;
rgba(226,
226,
226,
1);
background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 25%, rgba(219, 219, 219, 1) 57%, rgba(254, 254, 254, 1) 100%);
height: 100vh;
}
#portfolio .block .portfolio-contant ul li {
float: left;
width: 32.22%;
overflow: hidden;
margin: 6px;
position: relative;
}
#portfolio .block .portfolio-contant ul li:hover .overly {
opacity: 1;
}
#portfolio .block .portfolio-contant ul li:hover .position-center {
position: absolute;
top: 50%;
-webkit-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
#portfolio .block .portfolio-contant ul li a {
display: block;
color: #fff;
}
#portfolio .block .portfolio-contant ul li a h2 {
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
}
#portfolio .block .portfolio-contant ul li a p {
font-size: 15px;
}
#portfolio .block .portfolio-contant ul li a span {
font-style: italic;
font-size: 13px;
color: #655E7A;
}
#portfolio .block .portfolio-contant ul img {
width: 100%;
height: auto;
}
#portfolio .block .portfolio-contant .overly {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
-webkit-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
text-align: center;
}
#portfolio .block .portfolio-contant .position-center {
position: absolute;
top: 50%;
left: 10%;
-webkit-transform: translate(0%, 50%);
-moz-transform: translate(0%, 50%);
-ms-transform: translate(0%, 50%);
transform: translate(0%, 50%);
-webkit-transition: .5s all;
-o-transition: .5s all;
transition: .5s all;
}
#contact {
height: 100vh;
padding-top: 10%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s32.postimg.org/ex6q1qxkl/pexels_photo.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
#contact h3 {
color: white;
}
footer ul {
list-style-type: none;
text-align: center;
}
footer li {
display: inline;
padding-right: 10px;
}
footer li:last-child {
padding: 0;
}
footer p {
color: grey;
font-size: 11px;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured">Portfolio</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- collapse navbar-collapse -->
</div>
<!-- container -->
</nav>
</header>
<div class="main">
<div class="row " id="home" data-speed="2" data-type="background">
<div class="container">
<h2 class="text-center">Welcome to my portfolio</h2>
<h4 class="text-center">Where awesomeness is crafted</h4>
<hr>
<ul>
<li><a href="https://github.com/vamshi121" class="btn btn-primary"><i class="fa fa-github"></i> GitHub</a></li>
<li><a href="https://tn.linkedin.com/in/mannemvamshi" class="btn btn-primary"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li><a href="https://freecodecamp.com/" class="btn btn-primary"><i class="fa fa-fire"></i> FreeCodeCamp</a></li>
</ul>
</div>
<!--container-->
</div>
<!--home-->
<div class="row" id="about" data-speed="2" data-type="background">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2>About me</h2>
<p>Courteous and Enthusiastic,I'm interested in IT and around in its globe. I began to be fascinated by web programming i.e, building websites and developing cross-platform apps.I'm always looking for new ventures where i can learn evolve and
expertise.
</marquee>
</div>
</p>
<p>My skills are:
<ul>
<li> Front-end : HTML5, CSS3 , jQuery, Bootstrap, AngularJS</li>
<li>Back-end: Ruby on Rails</li>
<li>Methodology: Agile, TDD</li>
</ul>
</p>
</div>
<!--col-md-5-->
<div class="col-md-4 col-md-offset-1">
<img class="img-circle img-style hidden-xs" src="https://www.triketech.site/images/log.png" />
</div>
</div>
<!--row-->
</div>
<!--container-->
</div>
<!--about-->
<div class="row" id="portfolio" data-speed="2" data-type="background">
<div class="container">
<h2 class="text-center">Portfolio projects</h2>
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="portfolio-contant">
<ul id="portfolio-contant-active">
<li class="mix Branding">
<a href="#">
<img src="#" alt="">
<div class="overly">
<div class="position-center">
<h2>Local Support</h2>
</div>
</div>
<!--overly-->
</a>
</li>
</ul>
</div>
<!--portfolio-contant-->
</div>
<!--block-->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--container-->
</div>
<!--portfolio-->
<div class="row" id="contact" data-speed="2" data-type="background">
<div class="container">
<div class="col-md-4 col-md-offset-1">
<h3>Contact me at:</h3>
<h3>thegreatvamshi@triketech.com</h3>
</div>
<!--col-md-4-->
</div>
<!--container-->
</div>
<!--contact-->
</div>
<!--main-->
<footer>
<ul>
<li><a href="#home">Home</a> </li>
<li><a href="#about">About</a> </li>
<li><a href="#portfolio">Portfolio</a> </li>
<li><a href="#contact">Contact</a> </li>
</ul>
<p class="text-center">Copyright © - All Rights Reserved. </p>
</footer>
</body>
</html><script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() >1920 ) {
$(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)");
} else if ($(document).scrollTop() >1580) {
$(".navbar-fixed-top").css("background-color", "black");
} else if ($(document).scrollTop() >620) {
$(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)");
} else {
$(".navbar-fixed-top").css("background-color", "transparent");
}
});
});
</script>
먼저 nav div(exp: id="nav") 안에 nav라는 ID를 만들고 나서 바디 태그가 완료된 하단에 만듭니다.이 코드를 추가합니다.
<script>
$(document).ready(function()
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll>50){
$("#nav").css("background", "#555");
}
else {
$("#nav").css("background", "transparent");
}
})
})
</script>
$(window).on('activate.bs.scrollspy', function (e,obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('nav_white');
var isBGDark = $(obj.relatedTarget).hasClass('nav_blue');
$('.menu').removeClass('nav_white');
$('.menu').removeClass('nav_blue');
if(isBGDark)
{
$('.menu').addClass('nav_white');
}else if(isBGLight)
{
$('.menu').addClass('nav_blue');
}
/*var isScrolled = $(document).scrollTop() > 1;
$('.menu').toggleClass('scrolled', isScrolled);
$(".demos").toggleClass("demo");
$(".demos").toggleClass("demo1");
var posicionActual = $(document).scrollTop();
$.each($('.nav_transparent'),function(){
if ($(this).position().top < posicionActual){
$("nav.menu").removeClass("nav_white");
$("nav.menu").removeClass("nav_blue");
$("nav.menu").addClass("nav_transparent");
$(".demos").removeClass("demo");
$(".demos").addClass("demo1");
$(".cls").removeClass("cls2");
$(".cls").addClass("cls1");
$(".cl").removeClass("cl2");
$(".cl").addClass("cl1");
$(".hamb-bottom").css({"background-color": "#fff"});
$(".hamb-middle").css({"background-color": "#fff"});
$(".hamb-top").css({"background-color": "#fff"});
}
});
$.each($('.nav_blue'),function(){
if ($(this).position().top <= posicionActual){
$("nav.menu").removeClass("nav_transparent");
$("nav.menu").removeClass("nav_white");
$("nav.menu").addClass("nav_blue");
$(".demos").removeClass("demo1");
$(".demos").addClass("demo");
$(".cls").removeClass("cls2");
$(".cls").addClass("cls1");
$(".cl").removeClass("cl2");
$(".cl").addClass("cl1");
$(".hamb-bottom").css({"background-color": "#fff"});
$(".hamb-middle").css({"background-color": "#fff"});
$(".hamb-top").css({"background-color": "#fff"});
}
});
$.each($('.nav_white'),function(){
if ($(this).position().top <= posicionActual){
$("nav.menu").removeClass("nav_blue");
$("nav.menu").removeClass("nav_transparent");
$("nav.menu").addClass("nav_white");
$(".demos").removeClass("demo");
$(".demos").addClass("demo1");
$(".cls").removeClass("cls1");
$(".cls").addClass("cls2");
$(".cl").removeClass("cl1");
$(".cl").addClass("cl2");
$(".hamb-bottom").css({"background-color": "#4285f4"});
$(".hamb-middle").css({"background-color": "#4285f4"});
$(".hamb-top").css({"background-color": "#4285f4"});
}
});*/
});
$(window).on("scroll", function(){
if($(document).scrollTop() < 10)
{
$('.nav').removeClass('nav_white');
$('.nav').removeClass('nav_blue');
$('.nav').removeClass('nav_transparent');
$('.nav').addClass('nav_transparent');
}
});해결책, 아마도.
언급URL : https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling
반응형
'programing' 카테고리의 다른 글
| jQuery ajax 게시 파일 필드 (0) | 2023.09.04 |
|---|---|
| plt.show() 창을 최대화하는 방법 (0) | 2023.09.04 |
| 여러 매개 변수가 있는 EXEC sp_executesql (0) | 2023.09.04 |
| 내 ember.js 경로 모델이 호출되지 않는 이유는 무엇입니까? (0) | 2023.09.04 |
| CSS 파일을 즉시 교체(그리고 새로운 스타일을 페이지에 적용) (0) | 2023.09.04 |