jquery change div css on scroll and also change back

Question

I have a top sticky menu bar. I add some css changes to it when the page starts to scroll past 1px. It works great right now, but I need it to change back when the scroll position is 0. Any help is appreciated. Thanks

Here is the js:

   $(document).scroll(function(){
if($(this).scrollTop() > 1)
{   
    $('.row-1').css({"box-shadow":"0 1px 3px rgba(0, 0, 0, 0.4)"});
 $('.row-1').css({"opacity":"0.9"});
}
});

David Hedlund · Accepted Answer · 2012-11-19 15:13:14Z

7

CSS:

.row-1 { /* some styles for row 1 */ }
.row-1.scrolled { 
   box-shadow: 0 1px 3px rbga(0, 0, 0, 0.4);
   opacity: 0.9;
}

Then simply toggle that scrolling class:

 $(document).scroll(function(){
     $('.row-1').toggleClass('scrolled', $(this).scrollTop() > 1);
 });

answered Nov 19, 2012 at 15:13

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

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

Comments

Magus · Accepted Answer · 2012-11-19 15:11:35Z

6

Try this :

$(document).scroll(function(){
    var row = $('.row-1'), scrollTop = $(this).scrollTop();
    if(scrollTop > 1)
    {   
        row .css({"box-shadow":"0 1px 3px rgba(0, 0, 0, 0.4)"});
        row .css({"opacity":"0.9"});
    }
    else if (scrollTop <= 1)
    {
        row.css({"box-shadow":"none"});
        row.css({"opacity":"1"});
    }
});

But you should use a css class and just toggle it. Like in the David Hedlund response.

answered Nov 19, 2012 at 15:11

Magus

15.1k4 gold badges40 silver badges52 bronze badges

1 Comment

Kiro Coneski Over a year ago

+1 or you can define a css class, and then remove it or add it as needed.

Collectives™ on Stack Overflow

jquery change div css on scroll and also change back

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related