jQuery滚动条滚动显示手机菜单

jQuery滚动条滚动显示手机菜单

添加时间:2021-02-27 19:59:13
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:手机菜单
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

刚开始打开页面,右下角菜单是隐藏的,当滚动条滚动到一定距离,便显示菜单。当滚动条到顶端的时候会隐藏菜单。
jQuery滚动条滚动显示手机菜单
分类:导航菜单 > 手机菜单 难易:初级

右下角菜单html代码

<div id="cd-nav">
    <a href="javascript:void(0)" class="cd-nav-trigger">Menu<span></span></a>

    <nav id="cd-main-nav">
        <ul>
            <li><a href='https://jy.tp.yuanmeng.life/js/362.html' target='_blank'>PHP汉语拼音转换</a></li> <li><a href='https://jy.tp.yuanmeng.life/js/363.html' target='_blank'>BoxSlider演示3种滚动内容方式</a></li> <li><a href='https://jy.tp.yuanmeng.life/js/364.html' target='_blank'>jQuery表单美化插件cForm</a></li> <li><a href='https://jy.tp.yuanmeng.life/js/365.html' target='_blank'>Xslider演示8种滚动效果</a></li> 
        </ul>
    </nav>
</div>

滚动时判断是否显示右下角菜单

$(window).scroll(function() {
    checkMenu();
});
function checkMenu() {
    if ($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
        navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
            mainNavigation.addClass('has-transitions');
        });
    } else if ($(window).scrollTop() <= offset) {
        //check if the menu is open when scrolling up
        if (mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) {
            //close the menu with animation
            mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
                //wait for the menu to be closed and do the rest
                mainNavigation.removeClass('is-visible is-hidden has-transitions');
                navigationContainer.removeClass('is-fixed');
                $('.cd-nav-trigger').removeClass('menu-is-open');
            });
            //check if the menu is open when scrolling up - fallback if transitions are not supported
        } else if (mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) {
            mainNavigation.removeClass('is-visible has-transitions');
            navigationContainer.removeClass('is-fixed');
            $('.cd-nav-trigger').removeClass('menu-is-open');
            //scrolling up with menu closed
        } else {
            navigationContainer.removeClass('is-fixed');
            mainNavigation.removeClass('has-transitions');
        }
    }
}
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery滚动条滚动显示手机菜单

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.146546s