커스텀 jQuery 코드를 구현하는 더 나은 방법은 없을까요?

개발
1

jQuery 코드에서 문제가 발생하고 있습니다. 항상 트리거되지 않는 경우가 있습니다.
제가 하려는 것은 사용자가 70px 이상 스크롤할 때 클래스를 토글하는 것입니다. 잘 동작하지만 항상 그런 것은 아닙니다.

예를 들어, 가끔 주제(topic)를 편집하거나 카테고리를 생성/편집한 후 로고를 클릭하여 홈 페이지로 돌아갔을 때, 페이지를 새로고침하지 않는 한 코드가 작동하지 않습니다.

또한 네이티브 docker 클래스를 사용할 수도 있지만, 제 예시에서는 히어로 섹션의 전체 높이를 스크롤한 후에만 추가됩니다. 저는 클래스가 더 일찍 추가되기를 원합니다.

따라서 Discourse 테마에 커스텀 jQuery 코드를 포함하는 더 나은 방법이 있을까요?

제가 사용 중인 코드:

$(function() {
    // 헤더 요소를 포함하는 jQuery 객체를 캐시합니다
    var header = $("body.categories-list .d-header-wrap, body.navigation-topics .d-header-wrap");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 70) {
            header.addClass("cd-active");
        } else {
            header.removeClass("cd-active");
        }
    });
});

테스트 테마:

https://theme-creator.discourse.org/?preview_theme_id=4529

2

Discourse는 SPA, 즉 단일 페이지 애플리케이션입니다. 이는 <head>에 추가한 JavaScript가 올바른 메서드를 사용하지 않는 한 초기 페이지 로드 시에만 한 번 실행된다는 것을 의미합니다. 이벤트 핸들러/리스너를 기반으로 실행되도록 코드를 수정해야 할 수 있습니다.

도움이 되셨기를 바랍니다.

3

네, 그렇게 해야 한다고 생각하지만, 그사이 수정 방법을 찾았습니다. 문제는 body.navigation-categories 대신 body.categories-list를 사용하고 있었던 것이었습니다. body.categories-list는 하위 카테고리 페이지에서도 사용되는데, 해당 페이지에 있을 때 코드가 전혀 작동하지 않았습니다(이유를 모르겠습니다).

수정: 여전히 같은 문제가 있어서 항상 작동하지 않습니다.

4

코드를 수정했는데 이제 작동하는 것 같습니다. 하지만 모든 페이지에서 실행됩니다. 이전 코드에서는 .navigation-categories와 .navigation-topics 페이지에서만 코드가 실행되도록 하려고 했는데, 아마 이것이 문제인 것 같습니다. 어쨌든 도움이 필요합니다. 감사합니다.

$(function() {
   $(window).on("scroll touchmove", function () {
    if ($(this).scrollTop() > 70) {
      $('.d-header-wrap').addClass('cd-active');  
    } else {
      $('.d-header-wrap').removeClass('cd-active');  
    }   
  });	  
});