[javascript] JointsWP4 (SASS) : 고정 속성 변경

요약 : Sticky가 실제로 JavaScript를 통해 변경 한 사항에 반응 할 수 있습니까? 그렇다면 어떻게?

(이 프로젝트는 Foundation 6.2 및 WordPress 4.4, Node.js / npm 및 gulp 4.0을 사용하여 설치된 테마를 사용하고 있습니다. 자세한 내용은 굵은 글씨로 표시되어 있습니다.)

navFoundation의 Sticky Plugin을 사용하여 막대를 끈적 하게 만들고 싶지만 버튼을 클릭했을 때만 가능합니다. 즉, DOM이 모두 완료되면 nav막대가 “그 자체로”고정되어서는 안되며 문서에서 최상위 위치에 있어야합니다. 또한 아래로 스크롤하면 사라지지만 위로 스크롤 할 때는 고정됩니다.

nav바 올바르게 필요한 모든에 싸여 div소위,의 nav줄이 부착 할 수 있습니다. 문제는 “추가”부분에서 발생합니다. 내 생각은 먼저 PHP를 사용하여 Sticky를 인스턴스화하는 것입니다.

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1"
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

그런 다음 data-btm-anchor클릭시 실행되는 JavaScript를 사용하여 현재 스크롤 위치로를 변경합니다 . 이것은 내가 원하는만큼 잘 작동하지 않았습니다. 지금까지 시도한 것 :

1. 사용하는 경우 getElementByID다음과 setAttribute의 data-btm-anchorPHP 파일에서 방화범에 따라 변화를 않습니다, 그러나 그것은 영향을주지 않는다 nav막대를 조금; 그것은 그대로 유지됩니다. Sticky를 “다시 인스턴스화”해야합니까? 그렇다면 어떻게해야합니까?
2. 문서는 언급 :

JavaScript로 옵션을 설정하려면 다음과 같이 객체를 생성자 함수에 전달해야합니다.

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

기존 플러그인 인스턴스에 새 매개 변수 를 전달할 수 있다는 의미 입니까? 옵션 배열 매개 변수로 Foundation.Sticky다른 btmAnchor 만 있는 새 개체를 my에 전달할 때마다 jQuery('#sticky_header')아무 일도 일어나지 않았습니다.

3. 문서는 또한 내 “sticky_header”에 스티커를 추가하는 프로그램 제안한다. 작동하면 jQuery 객체를 직접 변경할 수 있습니다. 지금까지 다음과 같은 방법으로 Sticky 플러그인을 내 헤더에 성공적으로 바인딩 할 수있었습니다.

   1. 버튼이 기능을 가져 오는 .js 던지기 assets/js/scripts(그리고 실행 gulp)
   2. 내에서 모든 데이터 고정 태그를 삭제 <header class="header">하므로 DOM이로드를 마쳤을 때 헤더에 등록 된 고정 플러그인이 없습니다.

   3. 프로그래밍 방식으로 플러그인 추가 :

      function button_fire(){
        var options = {
          topAnchor:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }

   헤더는 이제 Firebug에 따라 “sticky”클래스를 얻습니다. 하지만 여전히 작동하지 않습니다. 오히려 결함이 있습니다. “헤더 공간”이 다소 축소되어 div아래 “내용”을 약간 덮고 있습니다. 아시다시피 헤더가 달라 붙지 않습니다. 그게 버그인가요?

   지금 “훌륭하게”일하는 것이 가정, 나는 변화에 이론적으로 수 있어요는 역 참조에 의해 속성 var stick또는 사용 jQuery('#sticky_header')또는 jQuery('.header')?

무엇보다도 jQuery가 제대로 작동하지 않습니다. $내 스크립트에서 사용하는 데 많은 문제가 있었고 예를 들어 destroy()Sticky 메서드를 실행할 수 없습니다 (작동한다면 Sticky 인스턴스를 파괴하여 btmAnchor새로운 스크롤 위치로 설정). 이에 대해 다른 질문을 드리겠습니다.

답변

<div data-sticky-container class="sticky-container">

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10;
}

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

$(document).ready(function(){
    $(<Section name after which you want sticky to appear>).waypoint(function(direction){
        if (direction == "down"){
           $('nav').addClass('sticky');
           }else{
               $('nav').removeClass('sticky');
           }
    }, {
        offset: '60px'
    });

});

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options);

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);