3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
선생님 빡대가리 또 왔습니다 ㅠㅠㅎ.. 다름이 아니라, 아래 사진과 같이 외부스크립트로 연결해서 사용을 해봤는데, scrollTop 변수를 콘솔에 찍어보면, 새로고침을 해야지만 그때그때의 현재 스크롤 위치값이 나옵니다.. 그래서 이벤트도 특정위치에서 새로고침을 해야 발생하는데 혹시 제가 뭘 놓친게 있는지 확인부탁드립니다 ㅠㅠ 코드도 하단에 첨부하였습니다! 또한, 스크립트 태그 위치도 body태그 내부 하단으로도 변경해보았는데 소용이 없었습니다 ㅠ
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <!-- 부트스트랩 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <!-- 제이쿼리 CDN --> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> <!-- Custom CSS & JS--> <link rel="stylesheet" href="main.css"> <script src="tab.js"></script> </head> <body style="background-color: grey; height: 3000px;">
<div class="grey"> <div class="image">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis porro quis rem ratione, voluptate molestias sapiente vero doloribus quisquam animi dignissimos harum et nihil maxime, quibusdam accusamus dicta, reiciendis explicabo!
</div>
<div class="text" style="margin-top: 300px;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis porro quis rem ratione, voluptate molestias sapiente vero doloribus quisquam animi dignissimos harum et nihil maxime, quibusdam accusamus dicta, reiciendis explicabo!
</div>
</div>
<!-- 부트스트랩 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
//1.image가 top600넘어가면 다른 이미지로 바뀌어라 var scrollTop = $(window).scrollTop(); // Scroll Top
console.log(scrollTop);
if(scrollTop > 600){ document.getElementById('imgSrc').src = 'appletv.jpg'; } //2.image가 top600 넘어가면 이미지가 커져라 if(scrollTop > 600){ document.getElementById('imgSrc').style.width = '150%'; } .grey { background: lightgrey; height: 2000px; margin-top: 500px; } .image { float: right; width: 400px; position: sticky; top: 100px; transition: all 0.35s; } .text { float: left; width: 300px; }
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.