javascript - 使用移动 css 布局在页面滚动上添加 css 规则

Question

在我的网站中，我想在页面顶部显示一个特定的 div，只有当用户向下滚动时。当用户进入首页时，这个特定的 div 必须消失。

如何在滚动页面上激活 css 规则？

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

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

我该怎么办？我必须使用javascript？谢谢

升级:这是我的代码，但它不起作用:

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>

Answer 1

如果您能够使用 Jquery，则很容易跟踪 scroll 事件:

$(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');
  }
})

检查这个Demo Fiddle