手机商城网站,底部有悬浮导航,当滚动条滑动到提交表单位置时,利用jquery实现底部导航消失。
效果:
css代码:
.fade-out {
opacity: 0!important;
visibility: hidden!important;
}
jquery代码:
/**
* 底部导航滚动到表单隐藏
*/
$(document).ready(function(){
$(window).scroll(function () {
var scroll_height = $(this).scrollTop();// 滚动条离浏览器移动距离
var element_height = $("div#ec-form-wrapper").offset().top;// 元素的页面偏移位置
var element_scroll_height = element_height - scroll_height; // 元素距离浏览器的高度
var res_height = window.screen.availHeight; // 屏幕可用工作区高度
if(element_scroll_height < res_height){
$("#btn-list").addClass('fade-out');
}else{
$("#btn-list").removeClass('fade-out');
}
});
});
本文原创,转载请附带地址: http://www.bjcxy.club/article/jquery-scroll-nav/
此代码是北漂的程序猿给客户开发手机商城,提出的特效意见,便于用户体验!