How to do Style to jquery code

Question

I am trying to add some style elements to my jquery code.

My objective is to be able to position a box absolutely after the person has scrolled down the screen after 200px.

The box reduces in size after a 200px scroll but i want to have the ability to position the box where i want.

Here is my code.

Can some one guide me on where I am going wrong.

  $( window ).scroll(function() {
     if($(window).scrollTop() > 200){
       $('#profile-pic-bg').css({'width': '50'});
        $("#profile-pic-bg").css({ position: "absolute", top: "20", left:"5" });
     }else{
         $('#profile-pic-bg').css({'width': '145'});
     }

});

I didn't understand the point here, your code works fine unless you mean that you want a "floating box" PS: Remove Java Tag. — ImadBakir
– ImadBakir, Commented Nov 22, 2013 at 11:49
@user2965875, Jquery Is a Javascript library, Java is a thing, and Javascript is something else. — ImadBakir
– ImadBakir, Commented Nov 22, 2013 at 11:50
Somewhat off topic but Java and Javascript are similar like Car and Carpet are similar — Liam
– Liam, Commented Nov 22, 2013 at 11:52
What a useless discussion, just change the tag and be done with it. — David Hellsing
– David Hellsing, Commented Nov 22, 2013 at 11:53

David Hellsing · Accepted Answer · 2013-11-22 11:52:01Z

4

Remove the quotes from the top and left property values, or they wont work:

$("#profile-pic-bg").css({ position: "absolute", top: 20, left: 5 });

answered Nov 22, 2013 at 11:52

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

4 Comments

David Hellsing Over a year ago

top: "20", left:"5" -> top: 20, left: 5

musefan Over a year ago

Yeah I seen... thought you meant the actual properties, but you meant the property values

Bhojendra Rauniyar Over a year ago

@David also if he wants it with quote then he should use px like "20px"

David Hellsing Over a year ago

@C-Link true, but unless you are using other units than pixels it doesn’t make a difference. I prefer integers, some prefer strings...

Sridhar R · Accepted Answer · 2013-11-22 12:00:29Z

1

Try with this

$( window ).scroll(function() {
     if($(window).scrollTop() > 200){

        $("#profile-pic-bg").css({ 
            "position": "absolute", 
            "top": "20px", 
            "left":"5px" ,
            "width":'50px'
        });
     }else{
         $('#profile-pic-bg').css({'width': '145px'});
     }

});

DEMO

answered Nov 22, 2013 at 12:00

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

5 Comments

user2965875 Over a year ago

Thanks for this ! great help. Can you show me how you would add style to the box width 145px too?

Sridhar R Over a year ago

if scroll return again 200 below the height is set it to the selector see fiddle

user2965875 Over a year ago

if you check the fiddle the and move back up the screen the box does not pick up the original style. it moves out of place.

user2965875 Over a year ago

"background-image": "url('../img/assets/profile-pic-bg.png') 0px 0px no-repeat !important;"

user2965875 Over a year ago

I have tried to add a background image into the jquery but its not working? have i done somthing wrong?

Collectives™ on Stack Overflow

How to do Style to jquery code

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related