CSS style overriding using jQuery not working properly

Question

I am trying to fix the position of my share icons on windows scroll. so i set the position fixed on scroll event. Its not working properly.

position fixed important is not working.

If i scroll up at the starting point(at the place where scroll stops) the default is not replicated. CSS edited 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'));
}

}

$( window ).resize(function() { setHeader(); });

$(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%'});
    }
}

});

setHeader(); });

css:

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

some one do this trick.

rajesh · Accepted Answer · 2015-03-10 08:59:27Z

1

Use this:

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

Instead of:

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

answered Mar 10, 2015 at 8:59

rajesh

1,48511 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kavitha Velayutham Over a year ago

i am having important in css position static .. And i am getting only position:fixed not fixed !important in my browser.

rajesh Over a year ago

@Sami clear your cache memory for the browser then refresh using (ctrl + f5)

Jebble · Accepted Answer · 2015-03-10 10:17:26Z

0

Replace

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

with

social_alone.css({ position: fixed!important });

Also try to leave the !important out first, if it works without then you don't need it :)

answered Mar 10, 2015 at 10:17

Jebble

2661 silver badge12 bronze badges

Collectives™ on Stack Overflow

CSS style overriding using jQuery not working properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related