touchmove移动端:向下滚动时,头部消失,向上滚动时,头部出现,详细js代码,大小值可以随意带入
移动端:向下滚动时,头部消失,向上滚动时,头部出现,详细js代码,大小值可以随意带入,和腾讯课堂这个一样,看了很久,没看懂代码,求大神帮忙...
移动端:向下滚动时,头部消失,向上滚动时,头部出现,详细js代码,大小值可以随意带入,和腾讯课堂这个一样,看了很久,没看懂代码,求大神帮忙
展开
1个回答
2016-11-07
展开全部
<dl class="retrie">
<dt>
<a id="area" href="javascript:;">分类 </a>
<a id="wage" href="javascript:;">月薪</a>
</dt>
</dl>
<div class="content clearfix">
<div class="listclass">
<ul>
<li><a href="">
<div class="classbox is-Flexbox">
<div class="imgclass"><img src="image/clist4.jpg"/></div>
<div class="txtclass">
<div class="ctitle cl3 fs12">计算机网络课程</div>
<div class="ccost cl6 fs12">课程价格</div>
<div class="cevaluat fs10">
<span class="cl9">推荐指数:</span>
<ul>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
</ul>
<span class="fs10 score ">5.0</span>
</div>
</div>
</div>
</a></li>
</ul>
</div>
$('body').bind('touchstart', function (e) {
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$('body').bind('touchmove', function (e) {
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
//判断滑动方向
if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
if ($('.testfixed').hasClass('job-module_sec')) {
$('.testfixed').removeClass('job-module_sec');
}
if (!$('.testfixed').hasClass('job-module')) {
$('.testfixed').addClass('job-module');
}
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
if (document.body.scrollTop<49) {
if ($('.testfixed').hasClass('job-module_sec')) {
$('.testfixed').removeClass('job-module_sec');
}
if (!$('.testfixed').hasClass('job-module')) {
$('.testfixed').addClass('job-module');
}
}
else {
if (!$('.testfixed').hasClass('job-module_sec')) {
$('.testfixed').addClass('job-module_sec');
}
if ($('.testfixed').hasClass('job-module')) {
$('.testfixed').removeClass('job-module');
}
}
// $('.testfixed').removeClass('.job-module').addClass('.job-module_sec');
//alert('往下滑动');
} else {
console.log('点击未滑动');
}
});
<dt>
<a id="area" href="javascript:;">分类 </a>
<a id="wage" href="javascript:;">月薪</a>
</dt>
</dl>
<div class="content clearfix">
<div class="listclass">
<ul>
<li><a href="">
<div class="classbox is-Flexbox">
<div class="imgclass"><img src="image/clist4.jpg"/></div>
<div class="txtclass">
<div class="ctitle cl3 fs12">计算机网络课程</div>
<div class="ccost cl6 fs12">课程价格</div>
<div class="cevaluat fs10">
<span class="cl9">推荐指数:</span>
<ul>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
<li><img src="image/shi.png"/></li>
</ul>
<span class="fs10 score ">5.0</span>
</div>
</div>
</div>
</a></li>
</ul>
</div>
$('body').bind('touchstart', function (e) {
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$('body').bind('touchmove', function (e) {
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
//判断滑动方向
if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
if ($('.testfixed').hasClass('job-module_sec')) {
$('.testfixed').removeClass('job-module_sec');
}
if (!$('.testfixed').hasClass('job-module')) {
$('.testfixed').addClass('job-module');
}
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
if (document.body.scrollTop<49) {
if ($('.testfixed').hasClass('job-module_sec')) {
$('.testfixed').removeClass('job-module_sec');
}
if (!$('.testfixed').hasClass('job-module')) {
$('.testfixed').addClass('job-module');
}
}
else {
if (!$('.testfixed').hasClass('job-module_sec')) {
$('.testfixed').addClass('job-module_sec');
}
if ($('.testfixed').hasClass('job-module')) {
$('.testfixed').removeClass('job-module');
}
}
// $('.testfixed').removeClass('.job-module').addClass('.job-module_sec');
//alert('往下滑动');
} else {
console.log('点击未滑动');
}
});
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询