부트스트랩 Navbar 스크롤 기능
자주 쓰지만 따로 메모를 안해놔서 쓸때마다 찾아서 쓰는 네비바 스크롤 sticky-top 기능 코드 메모
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg top-0" id="navbar">
<div class="container">
<a href="index.html" id="navbarBrand" class="navbar-brand d-none d-md-block">
Dohyeon's Portfolio
</a>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover ms-auto">
<li class="nav-item dropdown dropdown-hover mx-2">
<a href="#home" class="nav-link ps-2 d-flex cursor-pointer align-items-center" onclick="scrollToSection('home')">Home</a>
</li>
<li class="nav-item dropdown dropdown-hover mx-2">
<a href="#about" class="nav-link ps-2 d-flex cursor-pointer align-items-center" onclick="scrollToSection('about')">About me</a>
</li>
<li class="nav-item dropdown dropdown-hover mx-2">
<a href="#educations" class="nav-link ps-2 d-flex cursor-pointer align-items-center" onclick="scrollToSection('educations')">Educations</a>
</li>
<li class="nav-item dropdown dropdown-hover mx-2">
<a href="#skills" class="nav-link ps-2 d-flex cursor-pointer align-items-center" onclick="scrollToSection('skills')">Skills</a>
</li>
<li class="nav-item dropdown dropdown-hover mx-2">
<a href="#projects" class="nav-link ps-2 d-flex cursor-pointer align-items-center" onclick="scrollToSection('projects')">Projects</a>
</li>
<li class="nav-item dropdown dropdown-hover mx-2">
<a href="https://github.com/Dohyeon-Parrk" class="nav-link d-flex cursor-pointer align-items-center">
<svg width="20px" height="20px" class="material-icons me-2 opacity-6" viewBox="0 0 24 24" aria-hidden="true" data-testid="GitHubIcon">
<path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path>
</svg>
Github
</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
// 스크롤 기능
function scrollToSection(sectionId) {
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: "smooth", block: "center" });
}
}
// 텍스트 색상 설정
function getTextColor(isTransparent, isDarkText) {
if (isTransparent && isDarkText) {
return "text-dark";
} else if (isTransparent) {
return "text-white";
} else {
return "text-dark";
}
}
// 초기화
document.addEventListener("DOMContentLoaded", function () {
const navbar = document.getElementById("navbar");
const isTransparent = false; // 예시 값을 설정합니다.
const isDarkText = false; // 예시 값을 설정합니다.
navbar.classList.add(getTextColor(isTransparent, isDarkText));
});
</script>
</body>
</html>
매일매일 공부한 내용과 코드 기록하겠습니다