實現置頂功能jQuery

SoapEye 發布于2019-08-21 10:19 / 1486人閱讀

摘要：去頂部去頂部置頂置頂功能置頂功能

HTML：        
        
        
            去頂部
        
        

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

GPU云服務器云服務器 php實現置頂功能 jquery置頂置頂功能 jquery功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85298.html

JavaScript實現置頂功能

摘要：實現置頂功能的方式有很多，之前也用過一些，感覺比較復雜吧，自己最近做的東西需要，因此也在網上找了些資料，最后找到一個方法可以獲取頁面元素到瀏覽器視窗頂部的距離。 JavaScript實現置頂功能的方式有很多，之前也用過一些，感覺比較復雜吧，自己最近做的東西需要，因此也在網上找了些資料，最后找到一個方法 getBoundingClientRect() 可以獲取頁面元素到瀏覽器視窗頂部的...

KaltZK 2019-08-20 18:13 評論0 收藏0
eyoucms v1.4.9授權破解版易優cms企業建站系統去版權版 v1.4.9

摘要：授權破解版易優企業建站系統易優企業建站系統是一款十分優秀專業的為企業創建網站服務的軟件。去版權破解版強大好用，為企業創建網站提供很多幫助和便利。直接去易優官網，購買商業授權即可去除版權。eyoucms v1.4.9授權破解版(易優企業建站系統)是一款十分優秀專業的為企業創建網站服務的軟件。eyoucms v1.4.9去版權破解版強大好用，為企業創建網站提供很多幫助和便利。易優cms破解授權...

番茄西紅柿 2021-08-10 09:40 評論0 收藏2637
用sort實現orderby

摘要：工作到了這個年數感覺那些基本函數語法已經跟人合一了根本不會為操作一些數據結構而思考半天了在做小程序的時候遇到了個的場景結果發現沒有以為的那么簡單也許是之前不求甚解的原因那么現在來解決的問題問題的產生與探討方向在小程序中有個將的某一條置頂的需工作到了這個年數, 感覺那些基本函數語法已經跟人合一了, 根本不會為操作一些數據結構而思考半天了. 在做小程序的時候遇到了個orderby的場景,...

jiekechoo 2019-08-23 14:14 評論0 收藏0
html簡單響應式滾動條置頂

摘要：那么盒子首先就需要設置一個的高和定位的值在中也要控制值，通過判斷滾動條移動到容器頂部時固定最終效果獲取屏幕滾動條簡單響應式滾動條置頂一般的，讓頁面出現滾動條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動條和overflow-y垂直滾動條那么現在要實現這樣的一個效果：直接在body中給一個header，后面一個Gr...

ranwu 2019-08-01 17:41 評論0 收藏0
html簡單響應式滾動條置頂

摘要：那么盒子首先就需要設置一個的高和定位的值在中也要控制值，通過判斷滾動條移動到容器頂部時固定最終效果獲取屏幕滾動條簡單響應式滾動條置頂一般的，讓頁面出現滾動條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動條和overflow-y垂直滾動條那么現在要實現這樣的一個效果：直接在body中給一個header，后面一個Gr...

daryl 2019-08-21 16:43 評論0 收藏0