javascript - 使用 jQuery 的 CSS 样式覆盖无法正常工作

Question

我正在尝试修复共享图标在 Windows 滚动条上的位置。所以我将位置固定在滚动事件上。它无法正常工作。

1. 固定重要位置不起作用。

2. 如果我在起点(在滚动停止的地方)向上滚动，则不会复制默认设置。CSS 编辑js:

   $(document).ready(function () {
   var shareLink = $('#article_tools');
   
     function setHeader(){
      if($(window).width() <= 990){
       var shareLink = $('#article_tools');
       if( shareLink.length > 0) {
           shareLink.prepend($(".social-share-custom"));
           shareLink.next().css({'margin-top': shareLink.outerHeight(true) + "px", 'float': 'left'});
       }
       else{
           var social_alone = $(".social-share-custom");
           $(".evt_detail_main").before(social_alone);
           social_alone.next().css('float', 'left');
       }
   
       $(".author-article-info, .orange_oval, .author-article-organization").wrapAll('<div class="author-details"></div>');
   }
   if ($(window).width()<768) {
       shareLink.prepend($(".social-share-custom"));
       $('.follow-login-wrapper').append($('#top-login'));
       $('.responsive-menu').append($("#simplemenu"));
       $('#logo-title').after($('#container-search'));
       $('#homemenu').after($('#primary').find('>ul>li'));
       $('#comments').before($('#sidebar-right').find('#sidebar-right-inner>#block-constant_contact-0'));
   }
   

   $(窗口).resize(函数(){ 设置标题()； });

   $(window).scroll(function(){
   if($(window).width()<=990) {
       if (shareLink.length > 0) {
           shareLink.next().css('margin-top', shareLink.outerHeight(true) + "px");
           shareLink.css("top", Math.max(0, 274 - $(this).scrollTop()));
           shareLink.css('background-color', 'white');
       }
       else{
           var social_alone = $(".social-share-custom");
           social_alone.next().css('margin-top', shareLink.outerHeight(true) + "px");
           social_alone.css("top", Math.max(0, 200 - $(this).scrollTop()));
           if(social_alone.css("top") == "0"){
               social_alone.attr('style','position: fixed !important');
           }
           social_alone.css({'background-color':'white','width':'64%'});
       }
   }
   

   });

   设置页眉();});

CSS:

     .social-share-custom {
     float: left;
     width: auto;
     position: static !important;
     margin: 1%
    }

有些人会这样做。

Answer 1

使用这个:

$(".social-share-custom").css({"position":"fixed !important"});

代替:

 social_alone.attr('style','position: fixed !important');