<style>
.lj{width:100px;height:100px;background:#990000;position:absolute;
top:400px;left:-60px;z-index:99;cursor:pointer;}
.lj.lj-is-visible{position:fixed;top:10px;}
</style>
<body style="height:2000px;">
<div class="lj" >
</div>
<script type="text/javascript">
$(window).scroll(function(){
($(this).scrollTop()>420)?$('.lj').addClass('lj-is-visible'):$('.lj').removeClass('lj-is-visible');
});
if(document.body.clientWidth<=800){
$('.lj').mouseenter(function(){$('.lj').stop().animate({left:'20'},500);});
$('.lj').mouseleave(function(){$('.lj').stop().animate({left:'-60'},1000);});
}
else{ $('.lj').css("left","20px"); }
</script>
</body>
实现2个功能:
1、当滚动像素大于420时,对div的样式添加lj-is-visible样式,否则只应该lj样式;
2、当前窗体的宽度少于800px时,对div应用mouseenter和mouseleave事件,当大于800px时,直接定义div的left值
注:要加载jQuery.js代码