Question

我有一个粘性侧边栏，在桌面上，侧边栏很粘 - 所以我切换了一个类

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

何时满足粘性条件。我的问题在于，在侧边栏超过页脚之前“取消”侧边栏 - 我的侧边栏高度是动态的，因为打开或关闭的不同内容会改变高度 - 所以停止位置会发生变化。

我的问题是：

我需要添加

css('top', dynamic-value);

到一个EXISTING类 - 因为这个类一旦到达页脚就会暂时“解开”侧边栏，当删除这个类（包含动态顶部值）时，将开始正常的粘性导航。

当我说：

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中要么有没有办法删除添加到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

Answer 1

无法从外部css文件添加或删除css。

但是对于您的问题，您可以通过将属性top重置为0来恢复放置在元素中的样式的效果。

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

Answer 2

我在这里做的是覆盖我通过jquery添加的css，只需转到

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

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

2 个答案: