是否可以通过jquery将css添加到现有的css类中？

我有一个侧边栏粘，并在桌面上，侧边栏是粘性 - 所以我切换一类的是否可以通过jquery将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);

它塞满了一切。

因此，有没有办法添加CSS到现有的CSS类，这不会被添加到DOM 或有没有办法删除CSS添加到DOM？

//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。

但随着你的问题，你可以通过属性top重置为0

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

来源

2013-05-27 05:19:15 jinmichaelr

什么，我在这里做的覆盖，我通过jQuery添加CSS回复您放置在元素的样式的效果，只需去

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

来源

2013-05-29 04:48:19 leemjac

是否可以通过jquery将css添加到现有的css类中？

回答

相关问题