在我的网站中,我想在页面顶部显示一个特定的 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>
最佳答案
如果您能够使用 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
关于javascript - 使用移动 css 布局在页面滚动上添加 css 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25999869/