add css rules on page scroll with mobile css layout

Question

In my website I want to show a particular div in the top of the page, only when the user scroll down. When the user go on top page, this particular div have to disappear.

How can I activate the css rule on scroll page?

.particular-div{
.....
not show on top rules
....
}

.particular-div-on-scroll-down{
set the div on fixed top position;
top:0px; position :fixed;
}

How can I do? I have to use javascript? Thank you

UPGRADE: this is my code, but it is not working:

CSS

 @media only screen and (max-device-width: 480px) {
    .shares{
        top:-100px;left: 0px;
        position:fixed;
        background:#efe3af;
    }
    .sharesShow{
    top:0px;left: 0px;
    }

}

Javascript:

<script>
            $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() + $(window).height() >     $(window).height() + 10) {
                        $("div.shares").addClass("sharesShow");
                    } else {
                        $("div.shares").removeClass("sharesShow");
                    }
                });
            });
        </script>

how can I do? can you help me with an example or rules? thanks — michele, Sep 23 '14 at 16:21
For vanilla you got to start here: http://stackoverflow.com/questions/12522807/scroll-event-listener-javascript. — loveNoHate, Sep 23 '14 at 16:24
I prefer jquery and compatible with IE obiouvsly...thank you again — michele, Sep 23 '14 at 16:35

score 2 · Accepted Answer · answered Sep 23 '14 at 16:37

IF you are able to use Jquery it is easy to track the scroll event:

$(window).scroll(function(){
  if($(this).scrollTop() > 0){
    //Do stuff if the user scroll down in this case show the div
    $('.particular-div').addClass('show');
  } else {
    //Do stuff if the user scroll to the top in this case hide the div
    $('.particular-div').removeClass('show');
  }
})

Check this Demo Fiddle

score 1 · Answer 2 · answered Sep 23 '14 at 16:38

<!DOCTYPE html>
<html>
<style>
body, html {
    margin:0;
    padding:0;
}
header {
    display:none;
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #000;
    color: #fff;
}
header.animateIt {
    top:0;
    position:fixed;
    left: 0;
    right: 0;
    z-index:999;
}

.content {
    padding: 0 20px 20px;
    background: #fff;
    line-height: 1.5;
    color: #333;
}

</style>
<body>
<div id="outer-ring">
    <header id="head">
    Header Content goes here   
</header>

<!-- just to make scroll content is added -->

<div class="content">
<p>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
    content
    <br/>
</p>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>

$(document).ready(function () {

    $(window).on("scroll", function () {
       console.log($(window).scrollTop())
       if($(window).scrollTop() > 50){ // header height..
           console.log("show")
            $('#head').show().addClass('animateIt');
       }else{
           console.log("hide")
            $('#head').hide().removeClass('animateIt');
       }

    });
});
</script>
</html>

Try this!!

score 1 · Answer 3 · answered Sep 23 '14 at 16:42

Yes, use JavaScript, or even easier to use jQuery.

I've made an example on JSFiddle: http://jsfiddle.net/46s3o8Lm/1/

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >     $(window).height() + 10) {
        $("div.particular-div").addClass("particular-div-on-scroll-down");
    } else {
        $("div.particular-div").removeClass("particular-div-on-scroll-down");
    }
});

Change the number 10 for the amount of pixels the user must scrolldown untill the class is added.

You don't need the `window.height` :) – DaniP Sep 23 '14 at 16:49 — DaniP, Sep 23 '14 at 16:49

add css rules on page scroll with mobile css layout

3 Answers3