나는 매우 가벼운 WP 테마를 만들고 있습니다. 사이드 바에는 두 페이지 길이 만 채우는 위젯이 거의 없습니다. 이제 사용자가 아래로 스크롤 할 때 위젯이 보이지 않을 때 사이드 바의 나머지 부분을 활용하고 싶습니다. 이것은 특히 기사가 매우 긴 경우에 좋을 것입니다.
jquery를 사용하는 부동 요소는 일반적입니다. 내가 말했듯이 이것은 매우 가벼운 주제로되어 있습니다. jQuery는 매우 무겁습니다. 특정 페이지 길이에 요소를 표시하기 위해 자바 스크립트 만 사용할 수 있습니까?
참고 :이 테마는 반응 형입니다.
[업데이트] 문제가 해결되었습니다! 모두에게 감사합니다.
jQuery를 위해 100kb 이상의 대역폭을 절약했습니다.
다른 사람에 대한 참조로 여기에 새 스크립트가 있습니다.
<script defer type="text/javascript">var width = window.innerWidth || document.documentElement.clientWidth;
//Trigger the script only on browser width above 1150px. Recommended on responsive websites
if (width > 1150){ function testScroll(ev){
//Will set the position to FIXED with TOP=80px when user scrolls 850px below.
if(window.pageYOffset>850){document.getElementById("targetID").style.position = "fixed";document.getElementById("targetID").style.top = "80px";}
//Will set the position to ABSOLUTE with TOP=AUTO when user scrolls to top just above 850px line
else {document.getElementById("targetID").style.position = "absolute";document.getElementById("targetID").style.top = "auto";};
window.onscroll=testScroll; };
</script>
귀하의 질문에 완전히 답하려면 다음을 사용할 수 있습니다.
window.onscroll(function() {
document.getElementById("target-id").style.display = "block";
});
이 기능은 창이 스크롤 될 때 트리거됩니다. 사용자가 단순히 페이지를 스크롤하는 경우이 함수가 호출되지 않는 방식으로 div를 드래그하기 위해이 함수를 함수 내부에 두는 것이 좋습니다. 예를 들어 "창이 400px로 스크롤 될 때 추가 div 표시"와 같이 스크롤 할 창에 대한 특정 양을 찾고 있다면 여기에 대한 훌륭한 대답이 있습니다. 창이 특정 위치로 스크롤 될 때 이벤트 트리거
window.scroll이 즉시 호출되고 원하는 항목이 아닐 수 있으므로 위치를 설정하기 위해 제공 한 링크를 사용하는 것이 좋습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다