//主要测试scrollTop
//测试功能:按钮在你设置的可视区域内显示一种效果,反之显示另一种效果
//由于编辑器无法上传效果图,所以没办法看到效果了,其实效果类似网站右下角的"回到顶部"。
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);
}
});
});

最佳答案

评论() 相关

收藏

赞

382379437

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。