IT/코딩 Javascript 17 jQuery "$(window).scrollTop()", Javascript "window.scrollY" 비교 $(window).scrollTop() and window.scrollY are both used to determine the vertical scroll position of a web page. However, there are some differences between them. $(window).scrollTop() is a jQuery method that returns the current vertical position of the scroll bar for the first element in the set of matched elements or sets the vertical position of the scroll bar for every matched element. It is .. 2024. 1. 21. Javascript arrow function (=>), this 구문 오류 자바스크립트 화살표(=>) 함수를 사용할 때, 이벤트 리스너가 부착된 DOM 요소를 지정하기 위하여 this를 사용하면 오류가 발생할 수 있으므로 event.currentTarget을 사용해야 합니다. 현재 실행 중인 이벤트 리스너가 부착된 DOM 요소를 지칭할 때에는 "event.currentTarget" When a code runs after an event takes place, this is known as registering an event handler. On the other hand, the event listener listens to the event and then triggers the code for handling the event. [출처] TechTarget 내용은 스택오.. 2023. 10. 19. 블로그 스킨의 자바스크립트 수정 코드에 대한 MS Bing AI 설명 const marks = document.querySelectorAll('#content .marker'); window.addEventListener('scroll', function() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; document.body.classList.toggle('roll', scrollTop > 400); for (const ele of marks){ let elementTop = ele.getBoundingClientRect().top; if ( elementTop < -64 ) { ele.classList.add('pin'); } .. 2023. 6. 24. (function () {})(); (function () { /* ... */ })(); (function () { /* ... */ }()); (() => { /* ... */ })(); a regular function function () {} + function call (); IIFE - Immediately-Invoked Function Expression - It executes immediately after it’s created. It was popular in JavaScript as a method to support modular programming before the introduction of more standardized solutions such as CommonJS and ES modules. Imme.. 2022. 8. 29. 북클럽 스킨 팝업창 최근 댓글 링크 관련 오류 정정 Book Club (tistory.com) 김영사 콘텐츠로 제작한 티스토리 북클럽 스킨 데모 페이지입니다. 북클럽 스킨은 모바일 화면에서 팝업 윈도를 띄웁니다. 화면이 작기 때문에 PC 화면의 사이드바(aside)를 모바일 화면의 팝업창으로 이동한 형태입니다. 모바일 기기에서 왼쪽과 같은 메뉴 버튼을 누르면 본문 위에 팝업 윈도가 뜨면서 사이드바의 내용을 나열하게 됩니다. 팝업창의 댓글 리스트에서 하나의 링크를 마우스로 클릭하면, 1. 해당 페이지를 웹브라우저의 메인 창에 펼치고 2. 클릭한 댓글의 위치로 화면이 이동합니다. https://skin-demo-0053.tistory.com/27#comment17308450 페이지 주소 + 글 번호(27) + 댓글 번호(#comment17308450) 댓글 .. 2022. 5. 26. Chrome 계열 웹브라우저의 개발자 도구 성능 모니터 Microsoft Edge 상단 오른쪽 3점 아이콘("설정 및 기타") - 단축키 팝업 창의 "기타 도구" 개발자 도구 - 단축키 개발자 도구 상단 오른쪽 3점 아이콘("사용자 지정 및 DevTools 제어") 1차 팝업 창 "기타 도구" 2차 팝업 창 "성능 모니터" 성능 모니터(Performance Monitor) - 페이지의 실시간 로딩이나 런타임 성능과 관련된 여러 가지 요소들 관찰 기능 - live performance and memory stats 1. CPU 사용(CPU usage) - 현재 접속한 웹페이지의 CPU 사용 점유율 - 시스템의 CPU 전체 점유율과 무관 - CPU usage percentage 2. JS 힙 크기(JavaScript heap size) - 현재 접속한 웹페이지의.. 2022. 4. 10. GNB navigation 코드 수정 코드를 머리로 짜는 것이 아니라 필요한 코드를 인터넷 검색하여 수정 작업을 진행하고 있습니다. 모르니까! 티스토리의 블로거들이 북클럽 스킨의 내비게이션 메뉴 GNB의 코드를 별다르게 유용한 목적으로 사용하지 않는 듯하여 새로운 기능을 추가하여 본래의 기능을 개선하고 있습니다. 이 페이지는 새로 만든 코드를 분실하면 처음부터 맨발로 다시 만들어야 하므로 그 변경 과정을 기록하는 것입니다. ※ 아무것도 모르는 상태에서 코드를 발로 작성하기 때문에 티스토리 블로그 서버에 악영향을 미칠 수도 있습니다. 클라이언트 처리 코드이므로 괜찮을 수도 있겠네요. 그래도 계속해서 개선해 나가야 합니다. 잘못된 코드 발견하시면 조언 부탁드립니다. 1. GNB NavBar의 현재 페이지 표시 코드 수정 // script.js .. 2022. 4. 6. jQuery fadeOut(), fadeIn() fadeOut() / fadeIn() .fadeOut( [ duration ], [ callback ] ) Returns: jQuery .fadeOut( [ duration ], [ easing ], [ complete ] ) $(selector).fadeOut( speed, easing, callback) The fadeOut() method Animates the opacity of the matched elements. Hides the matched elements by fading them to transparent. Hidden elements will not be displayed at all. 1. Once the opacity reaches 0, 100% 투명하게 되면, 2. the di.. 2021. 10. 9. Position Sticky를 구현하는 Fixed JS 코드 활용 1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 5. 활용: 본문 cloneNode()를 사용하여 DOM 객체의 복제본을 만들지 않고, siblings()를 사용하여 'position: fixed' 지정할 객체의 위 혹은 아래 객체(element)에 margin 속성을 부여하는 방법입니다. 1. 'position: fixed' 객체의 빠져나간 공간을 상위 sibling 객체에 marginBottom을 지정하여 메우는.. 2021. 10. 5. Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 2021.04.19 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2021.06.10 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 2021.06.13 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 2021.10.05 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 활용 4차 수정 코드 const nav = document.getElementById('main-header'), rectTop = nav.offsetTop, tmp = nav.cloneNo.. 2021. 9. 28.
