Difference between revisions of "Template:BIT-China"

Line 53: Line 53:
 
<div class="col-sm-12" id="content-wrapper" style="padding: 0;margin: 0;">
 
<div class="col-sm-12" id="content-wrapper" style="padding: 0;margin: 0;">
 
      
 
      
−
    <!--加载界面-->
 
−
    <div class="site-cover" id="site-cover" style="display: table;display:none">
 
−
    <span class="circle-wrapper" style="display: table-cell;vertical-align: middle">
 
−
        <div class="sk-circle">
 
−
            <div class="sk-circle1 sk-child"></div>
 
−
            <div class="sk-circle2 sk-child"></div>
 
−
            <div class="sk-circle3 sk-child"></div>
 
−
            <div class="sk-circle4 sk-child"></div>
 
−
            <div class="sk-circle5 sk-child"></div>
 
−
            <div class="sk-circle6 sk-child"></div>
 
−
            <div class="sk-circle7 sk-child"></div>
 
−
            <div class="sk-circle8 sk-child"></div>
 
−
            <div class="sk-circle9 sk-child"></div>
 
−
            <div class="sk-circle10 sk-child"></div>
 
−
            <div class="sk-circle11 sk-child"></div>
 
−
            <div class="sk-circle12 sk-child"></div>
 
−
        </div>
 
−
    </span>
 
−
    </div>
 
−
 
 
     <!-- BEGIN HEADER -->
 
     <!-- BEGIN HEADER -->
 
     <div class="header clearfix" id="header" style="width: 100%;position: relative;padding-bottom: 20px;background-size:cover;
 
     <div class="header clearfix" id="header" style="width: 100%;position: relative;padding-bottom: 20px;background-size:cover;
 
                                 background-image: url(https://static.igem.org/mediawiki/2016/9/9a/T--BIT-China--img--top_bg.png);">
 
                                 background-image: url(https://static.igem.org/mediawiki/2016/9/9a/T--BIT-China--img--top_bg.png);">
−
         <!--需要动态显示的导航栏-->
+
          
−
     <div class="col-sm-12 roll-nav roll-nav-hide content-wrap" id="nav-hide">
+
 
−
         <div class="header-container clearfix container" id="home-copy-container"
+
    <!--显示在顶部的导航栏——不固定-->
−
             style="margin-top: 10px" >
+
     <div class="col-sm-12 clearfix " style="padding: 0;height: 106px;">
−
                <a href="https://2016.igem.org/Team:BIT-China">
+
         <div class="header-container clearfix home-img" id="header-container"
−
                    <div class="site-logo center-block col-sm-1" style="display: table;padding: 0;">
+
             style="margin-top: 20px;z-index: 10" >
 +
 
 +
            <a href="https://2016.igem.org/Team:BIT-China">
 +
                <div class="site-logo center-block col-sm-1" style="display: table;padding: 0;height: 100%;">
 
                     <span style="display: table-cell;vertical-align: middle;">
 
                     <span style="display: table-cell;vertical-align: middle;">
 
                     <img src="https://static.igem.org/mediawiki/2016/e/e2/T--BIT-China--img--logo-purple.png"
 
                     <img src="https://static.igem.org/mediawiki/2016/e/e2/T--BIT-China--img--logo-purple.png"
Line 171: Line 154:
 
     </div>
 
     </div>
  
−
    <!--显示在顶部的导航栏——不固定-->
 
−
    <div class="col-sm-12" style="padding: 0;">
 
−
        <div class="header-container clearfix home-img" id="header-container"
 
−
            style="margin-top: 20px" >
 
−
        </div>
 
−
    </div>
 
 
     </div>
 
     </div>
  
Line 220: Line 197:
 
     var site_change_btn=$("#site-change-btn").eq(0);
 
     var site_change_btn=$("#site-change-btn").eq(0);
 
     window.onscroll = function () {
 
     window.onscroll = function () {
−
         if($(window).scrollTop()>100){
+
 
−
             nav_hide.removeClass("roll-nav-hide");
+
         //滚动监听，实现导航栏平滑固定
−
         }
+
        var scroll = $(window).scrollTop();
−
        else{
+
        var header=$("#header-container");
−
             nav_hide.addClass("roll-nav-hide");
+
        if (scroll >= 100) {
 +
             if(header.css("position") != "fixed"){
 +
                header.css({position:"fixed",top:"-70px"}).animate({
 +
                    top:"0",width:"100%",marginTop:"0px"
 +
                },100,"linear");
 +
            }
 +
 
 +
            //添加导航下拉class，删除两侧padding
 +
            header.addClass("roll-nav");
 +
            header.removeClass("home-img");
 +
         }else if (scroll <= 100) {
 +
             if(header.css("position") != "static"){
 +
                header.animate({
 +
                    top:"-70px",
 +
                },100,"linear",function(){
 +
                    header.css({position:"static"})
 +
                });
 +
            }
 +
 
 +
            //删除导航下拉class，增加两侧padding
 +
            header.removeClass("roll-nav");
 +
            header.addClass("home-img");
 
         }
 
         }
 +
        //导航栏平滑滚动——END
  
 
         //固定侧边导航
 
         //固定侧边导航
−
         if($(window).scrollTop()>95){
+
         if(scroll>95){
 
             nav_left_wrapper.css({
 
             nav_left_wrapper.css({
 
                 "margin-left":"0",
 
                 "margin-left":"0",
Line 252: Line 251:
  
 
         //页间跳转 —— 滚动一定长度之后显示
 
         //页间跳转 —— 滚动一定长度之后显示
−
         if($(window).scrollTop()>200){
+
         if(scroll>200){
 
             site_change_btn.css("display","block");
 
             site_change_btn.css("display","block");
 
         }
 
         }
Line 366: Line 365:
  
 
});
 
});
−
 
−
    /*检测网页加载完毕
 
−
    var stateChange = function () {
 
−
        if(document.readyState == "complete"){
 
−
            $("#site-cover").fadeOut(1000);
 
−
 
−
        }
 
−
    };
 
−
    document.onreadystatechange=stateChange; */
 
  
 
</script>
 
</script>
 
<body>
 
<body>
 
</html>
 
</html>

Revision as of 15:13, 9 November 2016

backtop