0

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

.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
4

2 回答 2

0

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

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

$('.not-sticky')
     .css('top',0)
     .removeClass('not-sticky');
于 2013-05-27T05:19:15.217 回答
0

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

 $(".element").css("top"," ");
于 2013-05-29T04:48:19.800 回答