Change Div Css on document scroll

Question

I want to div position to be fixed when document scroll and that div reached to 50px from top.

Please check the code below

HTML

<div id="main">
    <div id="nav"></div>
<div id="left"></div>

<div id="right">
    <div id="box1"></div>
    <div id="box2"></div>
</div>
</div>

CSS

#main{ overflow:hidden; width:600px; height:900px; background:#afaaac; margin:0; padding:0; }

#nav{ width:600px; height:40px; background:#15bc44; position:fixed; margin:0; padding:0;}

#left{ overflow:hidden; width:400px; height:900px; background:#18769e; float:left; }

#right{ overflow:hidden; width:200px; height:900px; background:#bc1544; float:right; }

#box1{ float:right; width:150px; height:200px; display:block;background:#e34d2a; margin-bottom:20px; }

#box2{ float:right; width:150px; height:200px; display:block;background:#e34d2a; margin-bottom:20px; }

.box2{ position:fixed; margin-left:50px; margin-top:50px; }

JS

$(document).ready(function() {
    var s = $("#box2");
    var pos = s.position();                   
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop() ;
        //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("box2");
        } else {
            s.removeClass("box2");
        }
    });

});

This work but it will go to the top of the document and jump back 50px.

I also tried changing

$(window).scroll(function() { to

$(window).scroll(function() > 50 {

and

if (windowpos >= pos.top) { to if (windowpos >= 50) {

This all seems make position jump around. Please check the JSFiddle below

http://jsfiddle.net/uGw2Z/2/

If anyone can point me out the correct way to do this, i will really appropriate it.

@Zword Thank you this works great. if you can add this as an answer i can select as the correct answer for others to see. — maxlk
– maxlk, Commented Jun 5, 2014 at 6:29

Zword · Accepted Answer · 2014-06-05 06:33:34Z

1

Just add a number inorder to remove jump : windowpos+54

Fiddle

answered Jun 5, 2014 at 6:33

Zword

6,8013 gold badges30 silver badges53 bronze badges

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

1 Comment

maxlk Over a year ago

Awesome. Work like a charm.

tejashsoni111 · Accepted Answer · 2014-06-05 06:26:29Z

0

You need to change the css code in the .box2 like this:

.box2{position:fixed; top:50px; margin-left:50px}

check out this fiddle : JSFIDDLE

edited Jun 5, 2014 at 6:26

answered Jun 5, 2014 at 6:21

tejashsoni111

1,4051 gold badge18 silver badges34 bronze badges

Collectives™ on Stack Overflow

Change Div Css on document scroll

2 Answers 2

Fiddle

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related