조인트WP4(SASS): 스틱 속성 변경

조인트WP4(SASS): 스틱 속성 변경

TL;DR: 스틱은 실제로 JavaScript를 통해 변경에 대응할 수 있습니까?만약 그렇다면, 어떻게?

(프로젝트는 Foundation 6.2 및 WordPress 4.4를 사용하여 Node.js/npm을 사용하여 테마를 설치하고 4.0을 꿀꺽합니다.질문 내용은 굵은 글씨로 표시되어 있습니다.)

제가 만들고 싶은 건nav버튼을 클릭했을 때만 Foundation의 Sticky Plugin을 사용하여 막대 스틱을 표시합니다.즉, DOM이 모두 종료되면,nav막대는 "그대로" 고정되지 않고 문서의 맨 위에 있어야 합니다.또한 아래로 스크롤할 때는 사라지지만 위로 스크롤할 때는 사라지지 않습니다.

그nav바가 모든 필수 항목으로 올바르게 포장되어 있습니다.divs, 그러니까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 파일의 변경은 Firebug에 따라 이루어지지만, 그것이 Firebug에 영향을 미치지는 않습니다.nav막대를 좀 쳐요. 원래 있던 자리에 그대로 있어요.스틱을 "재설치"해야 합니까?재설치할 경우 어떻게 해야 합니까?
2. 이 문서는 다음을 언급하고 있습니다.

JavaScript를 사용한 옵션 설정에는 다음과 같은 오브젝트를 컨스트럭터 함수로 전달합니다.

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

기존 플러그인 인스턴스에 새 파라미터를 전달할 수 있습니까?내가 새로운 곳을 지날 때마다Foundation.Stickyoptions 배열 파라미터로서 다른 btmAnchor를 가진 오브젝트jQuery('#sticky_header'),아무일도 없었다.

3. 또한 문서에서는 "sticky_header"에 스틱을 프로그래밍 방식으로 추가할 것을 제안합니다.만약 그것이 효과가 있다면, 저는 jQuery 객체를 직접 변경해 볼 수 있습니다.지금까지 다음과 같이 헤더에 스틱플러그인을 성공적으로 바인드 할 수 있었습니다.

   1. 단추가 기능하는 .timeout을 던지다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에 따르면 헤더는 이제 "스틱" 클래스를 얻습니다.하지만 여전히 작동하지 않습니다. 오히려 결함이 있습니다.'헤더 스페이스'가 약간 무너져 있어서 '콘텐츠'를 살짝 커버하고 있습니다.div리글이 안는 는? ???★★★★★★★★★★★★★★★★★?

   지금 '명석하게' 동작한다고 가정하면 이론적으로 또는 를 사용하여 속성을 변경할 수 있습니까?

무엇보다 jQuery가 제대로 작동하지 않습니다.스크립트에서 사용하는 데 많은 문제가 있었습니다. 예를 들어,destroy()하고, 스틱의 인스턴스를 가능성이 .btmAnchor을 이용하다하다

스틱 css Atribute는 scss 내에서만 사용할 수 있습니다.

html 또는 php에서 클래스를 컴포넌트에 추가합니다.

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

scs 또는 css:

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

이제 필요한 거리를 위에서만 올려놓으세요!

jquery를 완전히 사용하여 스틱을 제어하는 것을 선호합니다.

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

이것을 사용하면, Web 사이트의 어느 부분이라도 버튼 스크롤 할 수 있습니다.

스틱의 경우 첫 번째 섹션을 스크롤할 때만 스틱클래스를 추가합니다.이렇게 하려면 다음 절차를 수행합니다.

$(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'
    });

});

웨이포인트 플러그인을 사용하면 요소 또는 섹션을 스크롤할 때 스틱 클래스를 쉽게 추가할 수 있습니다.Jquery Selector는 각각 # 및 를 사용하여 ID 및 클래스별로 선택할 수 있습니다.

워드 프레스를 사용하면 JQuery가 자동으로 큐잉됩니다.

Wordpress에서 JQuery를 사용하는 방법은 두 가지가 있습니다.

$ 대신 JQuery 사용

Wordpress는 충돌 없는 모드에서 JQuery를 실행하므로 $ 대신 JQuery를 사용해야 합니다.

고객님의 케이스

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);

언급URL : https://stackoverflow.com/questions/35682646/jointswp4-sass-changing-properties-in-sticky