반응형
<script>
(function() {
function Scrollify() {
var line = document.querySelector(".scroll-line"),
scrollpos = window.pageYOffset,
docheight = document.body.clientHeight,
winheight = window.outerHeight,
scrolled = ( scrollpos/( docheight-winheight) )*100;
line.style.width = (scrolled + '%');
}
window.addEventListener("scroll", Scrollify);
})();
</script>
<style>.scroll-line { height: 3px; background: #ea1e63; width: 0%; clear: both; } </style>
반응형
'CSS_JS' 카테고리의 다른 글
html 부드러운 스크롤 쉬운적용 jquery smooth scroll (0) | 2017.11.16 |
---|---|
ie8 버전 이하 html5.js 적용하기 (0) | 2017.11.10 |
이미지 100% 팝업 띄우기 (0) | 2017.07.19 |
반응형 웹에서 이미지맵 사용하기 (0) | 2017.05.15 |
이미지 링크점선 없애기 (0) | 2017.05.15 |