Quay lại-
3
-
0
-
FacebookGiới thiệu sản phẩm
<!DOCTYPE html>
<html>
<head>
<title>Thanh cuộn và nội dung</title>
<meta charset='utf-8'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="eggy.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- xs - extremely small - phone - chiều rộng màn hình < 576px -->
<!-- sm - small - phone - chiều rộng màn hình > 576px -->
<!-- md - medium - tablet - chiều rộng màn hình > 768px -->
<!-- lg - large - desktop - chiều rộng màn hình > 992px -->
<!-- xl - extremely large - screen - chiều rộng màn hình > 1200px -->
<!-- xxl - extra extra large - screen - chiều rộng màn hình >1400px -->
<!-- liên quân -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://bootstrap-5.1.1-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>var scrollSpy = new boostrap.ScrollSpy(document.body,{target:'#navbar-example'})</script>
<style>
</style>
</head>
<body>
<div class ="col-4 ofset-1">
<nav id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class ="nav-link" href="#content-javascript">javascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content-css">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content-boostrap">boostrap</a>
</li>
</ul>
</nav>
</div>
<div class="col-5">
<div data-bs-spy="scroll" data-bs-target="#myScrollspy"
style="height:200px;overflow-y:scroll;padding: 5px;border: 1px solid #ccc;">
<h4 id="content-javascript">javascript</h4>
<p>Content_1</p>
<h4 id="content-css">CSS</h4>
<p>Content_2</p>
<h4 id="content-boostrap">boostrap</h4>
<p>Content_3</p>
</div>
</div>
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<a class='navbar-branfd' href="#">Navbar</a>
<ul class="nav nav-pills">
<li class='nav-item'><a class="nav-link" href="#scrollspyHeading1">first</a></li>
<li class='nav-item'><a class="nav-link" href="#scrollspyHeading2">second</a></li>
<li class="nav-itemmenu">
<a class="nav-link dropdown-item toggle" data-bs-toggle="dropdown" href="#" role="button">dropdown</a>
<ul class="dropdown-menu"
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" class="p-5">
<h4 id="scrollspyHeading1">frist heading</h4>
<p>Content1</p>
<h4 id="scrollspyHeading2">frist heading</h4>
<p>Content2</p>
<h4 id="scrollspyHeading3">frist heading</h4>
<p>Content3</p>
<h4 id="scrollspyHeading4">frist heading</h4>
<p>Content4</p>
<h4 id="scrollspyHeading5">frist heading</h4>
<p>Content5</p>
</div>
</body>
</html>
Hãy bình luận để nhặt 100 thóc nhé
Sản phẩm cùng tác giả
-
Nhà sáng tạo Trần Khánh VyTrang web game -
Nhà sáng tạo Trần Khánh VyÝ tưởng -
Nhà sáng tạo Trần Khánh VySNLTW - HP7 - B7 - Hộp thoại
Đăng nhập để tham gia bình luận