用jquery实现滚动条滑动到页面某元素位置，底部导航消失

手机商城网站，底部有悬浮导航，当滚动条滑动到提交表单位置时，利用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/

此代码是北漂的程序猿给客户开发手机商城，提出的特效意见，便于用户体验！