jss를 통해 기존 CSS 클래스에 CSS를 추가 할 수 있습니까?

나는 끈적 사이드 바 있고, 바탕 화면, 사이드 바는 끈적 - 그래서 나는 끈적 끈적한 조건이 충족되지 않았거나jss를 통해 기존 CSS 클래스에 CSS를 추가 할 수 있습니까?

.fixed {top:20px; position:fixed}

의 클래스를 전환합니다. 내 문제는 꼬리말을 넘어 가기 전에 사이드 바를 "떼내어"놓는 것입니다. 사이드 바 높이가 동적입니다. 다른 것들이 열리거나 닫히면 높이가 변하기 때문에 정지 위치가 바뀝니다.

내 질문은 :

내가 기존 클래스에

css('top', dynamic-value);

를 추가 할 필요가 -이 클래스가 일시적으로 바닥 글에 도달하면 사이드 바 "를 잡아 떼다"이를 제거 할 때 무슨 그대로 클래스 (동적 톱 값 포함)에서 일반 끈적한 탐색이 시작됩니다.

내가 말할 때 :

element.addClass('not-sticky') 
$('.not-sticky').css('top',dynamic-value);

조건이 충족 될 때 예상대로 다음 요소는 클래스 끈적하지 얻을 수 있지만, CSS는 예상 작품으로

to the dom, not the actual class as i specify. So when i then 
removeClass('not-sticky');

를 추가됩니다,하지만 DOM 경우

css('top',dynamic-value);

다른 모든 것을 채워 넣습니다.

DOM에 추가되지 않는 기존 CSS 클래스에 CSS를 추가하는 방법이 있습니까 아니면 또는 DOM에 추가되는 CSS를 제거 할 수있는 방법이 있습니까?

//css 
@include respond-to(desktop) { 
     width: 310px; 
     float: left; 

    &.fixed { 
     top: 20px; 
     height: auto; 
     position: fixed; 
     } 

    &.not-fixed { 
     //top: 5656px; 
     position: absolute; 
    } 

} 

//jquery 
$(document).scroll(function() { 

     scrollTop = $(document).scrollTop(); 
     sidebar = $(".sidebar"); 
     sidebarFixed = sidebar.hasClass("fixed"); 
     sidebarHeight = sidebar.height(); 
     var footerTop = $('.footer').offset().top; // where footer starts 

     // FIXED desktop navigation conditions 
     var stickyDesktop = scrollTop > (sidebarOffset - 20); 

     // STOP being sticky navigation condition 
     // when the sidebar has scrolled far enough from the top of the document (scrollTop) 
     // that the bottom of the sidebar (sidebar Height) hits the top of the footer (footerTop) 
     // the 120 is to account for spacing between the top of the footer and bottom of sidebar 
     var stickyLimit = (scrollTop + sidebarHeight + 120) > footerTop; 


     // this is to be the top: diff for the .not-fixed class 
     var diff = scrollTop - stickyLimit; 

     if(windowWidth >= 1080) { 
      // on desktop make sidebar sticky on scroll 
      stickyDesktop = scrollTop > (sidebarOffset - 20); 
      sidebar.toggleClass('fixed',stickyDesktop); 

      // if the navigation is sticky 
      if(sidebarFixed === true) { 
       pageIntro.slideUp(300); 
      } else { 
       pageIntro.slideDown(300); 
      } 

      // if condition to stop fixed navigation is met 
      if (stickyLimit === true) { 

       stickyLimit = (scrollTop + sidebarHeight + 120) > footerTop; 

       // stop nav being sticky 
       sidebar.addClass('not-fixed'); 
       // THIS CSS DOESN'T GET ADDED TO THE CLASS BUT TO THE DOM 
       $(".not-fixed").css('top',diff); 


      } else { 
       // regular sticky again 
       sidebar.removeClass('not-fixed'); 
      } 
     } 

    }); // end document scroll function

출처

2013-05-27 leemjac

외부 CSS 파일에서 CSS를 추가하거나 제거 할 수있는 방법이 없습니다.

하지만 당신의 문제, 당신은 내가 jQuery를 통해 추가 된 CSS를 덮어 무엇 내가 여기했던 0

$('.not-sticky') 
    .css('top',0) 
    .removeClass('not-sticky');

출처

2013-05-27 05:19:15 jinmichaelr

에 재산 top를 재설정하여 해당 요소에 배치 스타일의 효과를 되돌아 갈 수 있습니다 ,가는 것만으로

$(".element").css("top"," ");

출처

2013-05-29 04:48:19 leemjac

jss를 통해 기존 CSS 클래스에 CSS를 추가 할 수 있습니까?

답변

관련 문제