부트스트랩 네비게이션바 효과관련 질문드립니다.

부트스트랩 네비게이션바 효과관련 질문드립니다.

QA

부트스트랩 네비게이션바 효과관련 질문드립니다.

본문

예1 : 네비게이션바가 스크롤 최정상에 위치했을때 투명해지고 스크롤을 조금내리면 다시 나타나는 효과

 

예2 : 네비게이션바가 스크롤 최정상에 위치했을때 전부펴지고 스크롤을 조금내리면 컨테이너 폭까지만 활성화 되는효과

 

이효과를 적용하려고 하는데 생각보다 잘나와있는 예제를 찾기가 힘드네요..

 

부트스트랩 테마 활용해서 확인해 보려고 하니 자바스크립트랑 css를 알아보기가 힘들어서요

 

질문이 제가 생각해도 좀 그렇지만 어떤효과인지 아시는분은 아시리라고 생각됩니다. 

좋은 예제소스 알려주시면 정말정말 감사합니다.

 

이 질문에 댓글 쓰기 :

답변 2


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}
.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}
#navbar {
  overflow: hidden;
  background-color: #333;
}
.navbartrans {
  background-color: #ff00ff !important;
}
.navbarareatrans{
  max-width:500px;
  margin:0px auto;
}
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
.content {
  padding: 16px;
  max-width:500px;
  margin:0px auto;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>
<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>
<div id="navbar">
  <div id="navbararea">
    <a class="active" href="javascript:void(0)">Home</a>
    <a href="javascript:void(0)">News</a>
    <a href="javascript:void(0)">Contact</a>
  </div>
</div>
<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
    navbar.classList.add("navbartrans");
    navbararea.classList.add("navbarareatrans");
  } else {
    navbar.classList.remove("sticky");
    navbar.classList.remove("navbartrans");
    navbararea.classList.remove("navbarareatrans");
  }
}
</script>
</body>
</html>

 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

 

응용해보세요

제이쿼리 이용해서 스크롤시 작아지는 클래스 또는 스타일 입히도록 하는거 일거에요

자체적인 기능은 아닐거에요

 

https://startbootstrap.com/previews/freelancer

 

여기 무료 테마에 원하시는 기능이 있을거같네요

답변을 작성하시기 전에 로그인 해주세요.
전체 22
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT