CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kavitha Velayutham
Kavitha Velayutham

Reputation: 703

CSS style overriding using jQuery not working properly

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.

  1. position fixed important is not working.

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

Upvotes: 1

Views: 122

Answers (2)

Jebble
Jebble

Reputation: 266

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 :)

Upvotes: 0

rajesh
rajesh

Reputation: 1485

Use this:

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

Instead of:

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

Upvotes: 1

Related Questions