//测试功能：按钮在你设置的可视区域内显示一种效果，反之显示另一种效果
//由于编辑器无法上传效果图，所以没办法看到效果了，其实效果类似网站右下角的“回到顶部”。
HTML代码：
<div class="full-into-name"><span class="glyphicon glyphicon-plus"></span>报名</div>
<div class="full-into-name-div"><span class="glyphicon glyphicon-plus"></span>报名</div>初始样式：.full-into-name{
border-radius: 23px;
background-color: rgb(54,191,126);
color: white;
width: 25%;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 16px;
}
.full-into-name-div{
display: none;
border-radius: 23px;
background-color: rgb(54,191,126);
color: white;
width: 25%;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 16px;
} JS代码：$(function () {
$(window).scroll(function () {
//两个div设置同样样式，一个在屏幕可视区滑动时显示，反之另一个隐藏
var obj = $('.full-into-name');
var obj_div = $('.full-into-name-div');
var top = $(window).scrollTop();
if(top <= 1500){
$(obj).fadeOut(800);
$(obj_div).css({
'border-radius': '23px',
'background-color': 'rgb(54,191,126)',
'color': 'white',
'width': '25%',
'height': '45px',
'line-height': '45px',
'text-align': 'center',
'font-size': '16px',
'position': 'fixed',
'bottom': '5px'
});
$(obj_div).fadeIn(800);
}else {
$(obj).fadeIn(800);
$(obj_div).fadeOut(800);
}
});
}); 最佳答案
