jQuery实战教程 如何实现置顶功能
沉沙 2018-06-28 来源 : 阅读 1200 评论 0

摘要:本篇jQuery实战教程通过代码讲解了如何实现置顶功能,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

HTML:        

        <!--Go to Top-->
        <div id="Fixed">
            <a id="goTop" title="去顶部" href="javascript:;">去顶部</a>
        </div>
        <!--Go to Top end-->

 

CSS:    

    .fl{
        display:block;
        float:left;
        width:50px;
        height:50px;
        text-align:center;
        background-color:#eaeaea;
        background-image:url(../images/toTop.png);
    }
    .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}
 
    #Fixed {
        position: fixed;
        _position: absolute;
        z-index: 100;
        bottom: 70px;
        left: 50%;
        margin-left: 530px;
        _bottom: auto;_top:
        expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
        width: 50px;
        text-indent: -40000px;
        background: #fff
    }
 
    /*置顶 end*/

 

Js:    

    /*置顶功能*/
    $(function(){
    $(window).bind('scroll', {
        fixedOffsetBottom: parseInt($('#Fixed').css('bottom'))
    },
    function(e) {
        var scrollTop = $(window).scrollTop();
        var referFooter =$('#footer');
        scrollTop > 100 ? $('#goTop').show() : $('#goTop').hide();
        if (!/msie 6/i.test(navigator.userAgent)) {
            if ($(window).height() - (referFooter.offset().top - $(window).scrollTop()) > e.data.fixedOffsetBottom) {
                $('#Fixed').css('bottom', $(window).height() - (referFooter.offset().top - $(window).scrollTop()))
            } else {
                $('#Fixed').css('bottom', e.data.fixedOffsetBottom)
            }
        }
    });
 
    $('#goTop').click(function() {
        $('body,html').stop().animate({
            'scrollTop': 0,
            'duration': 100,
            'easing': 'ease-in'
        })
    });
    });
    /*置顶功能 end*/

 

本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程