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

手机商城网站,底部有悬浮导航,当滚动条滑动到提交表单位置时,利用jquery实现底部导航消失。

效果:

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

用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/

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

如有wordpress博客开发,wordpress开发,网站建设,手机网站建设,微信公众号开发,微信小程序开发,请联系我们!

QQ:598887907 微信:北漂的程序猿-微信号

发表评论

电子邮件地址不会被公开。 必填项已用*标注