jQuery页面头部带loading进度指示的滚动页面特效-HTML源码网

这是一款非常实用且效果很酷的jQuery页面头部带loading进度指示的滚动页面特效。该特效在页面滚动的时候页面头部将有Loading进度条指示当前页面滚动的位置，这可以让用户清晰的知道他们当前阅读的地方距离页面底部还有多少距离。该页面头部loading特效共有4中效果：基本的loading进度条效果，整个头部作为loading进度条的效果，网站logo作为loading进度条的效果和loading和网站logo进度条同时操作的效果。

使用方法

HTML结构

这几个页面头部loading特效的主要区别是<header>的代码和每种效果的js代码。第1、3和4中效果的<header>代码是相同的，如下：

<div id="header">
  <div id="header-inner">
    <div id="header-inner-logo">
      <img src="img/logo.png" width="229" height="50" />
    </div>
    <div id="header-inner-nav">
      <p><a href="index.html">Example 1</a></p>
      <p><a href="example2.html">Example 2</a></p>
      <p class="header-inner-nav-active"><a href="example3.html">Example 3</a></p>
      <p><a href="example4.html">Example 4</a></p>
    </div>
  </div>
</div>

第二种效果的<header>代码如下：

<div id="header">
  <div id="header-inner">
    <div id="header-inner-logo" style="background: transparent;">
      <div id="header-inner-logo-icon"><span class="iconb" data-icon=""></span></div>
      <div id="header-inner-logo-text"><span>Awesome</span>Company</div>
    </div>
    <div id="header-inner-nav">
      <p><a href="index.html" >Example 1</a></p>
      <p><a href="example2.html">Example 2</a></p>
      <p><a href="example3.html">Example 3</a></p>
      <p><a href="example4.html">Example 4</a></p>
    </div>
  </div>
</div>

第二种效果的网站logo使用的是文本，而其它效果中Logo使用的是图片。logo图片使用的是文字镂空的透明图片，在实现logo的loading效果的时候使用了CSS3的background-clip属性来制作文本的移动背景效果，请注意IE浏览器是不支持这个属性的。

CSS样式

这个页面头部loading特效的CSS没有什么特别指出，十分简单，4个例子使用相同的CSS代码：

#header{
  float: left;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1;
  color: rgba(255,255,255,1);
  background-color: #262932;
}
#header-inner {
  width: 1100px;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
}
#header-inner-logo {
  float: left;
  line-height: 50px;
  height: 50px;
  width: 229px;
  background: #FFF;
  margin-top: 15px;
}
#header-inner-logo-icon {
  float: left;
  height: 50px;
  width: 50px;
  font-size: 40px;
  text-align: center;
}
#header-inner-logo-text {
  float: left;
height: 50px;
  font-size: 20px;
}
#header-inner-logo-text span {
  font-weight: 600;
}
#header-inner-nav {
  float: right;
}
#header-inner-nav p {
  font-size: 15px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  display: block;
  float: left;
  margin-left: 15px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  line-height: 35px;
  margin-bottom: 0px;
  margin-top: 22px;
}
#header-inner-nav p:hover {
  background-color: hsla(203,50%,50%,1);
}
#header-inner-nav p a {
  color: hsla(0,0%,100%,1);
  text-decoration: none;
  padding-right: 15px;
  padding-left: 15px;
  display: block;
}
.header-inner-nav-active {
  background-color: #35759F;
}
#loading {
  background-color: #EF4848;
  height: 3px;
  width: 0px;
  position: fixed;
  left: 0px;
  top: 80px;
}

JAVASCRIPT

每一个例子都有它自己单独的js文件。第一个例子是在页面滚动的时候修改#loading元素的长度。#loading元素的长度依据与当前滚动条的位置相对于整个页面高度的百分比得出。

滚动的百分比是如何得到的呢？插件中通过一个简单的公式来计算得出，先计算出最大的滚动像素数，将其转换为百分比，然后使用当前的滚动像素除以这个百分比数。

$(function() {
  function scroll_fn(){
    document_height = $(document).height();
    scroll_so_far = $(window).scrollTop();
    window_height = $(window).height();
    max_scroll = document_height-window_height;
    scroll_percentage = scroll_so_far/(max_scroll/100);
    $('#loading').width(scroll_percentage + '%');
  }

  $(window).scroll(function() {
    scroll_fn();
  });
   
  $(window).resize(function() {
    scroll_fn();
  });

});

第二个效果是将页面的头部作为一个颜色渐变，然后根据滚动百分比来移动渐变的颜色，代码中已经为不同的浏览器厂商添加了前缀：

$(function() { 
  function scroll_fn(){
    document_height = $(document).height();
    scroll_so_far = $(window).scrollTop();
    window_height = $(window).height();
      
    max_scroll = document_height-window_height;
   
    scroll_percentage = scroll_so_far/(max_scroll/100);
      
    $('#header').css({background: "-webkit-gradient(linear, left top, right top, color-stop("+scroll_percentage+"%,#ef4848), color-stop("+scroll_percentage+"%,#262932))" });
    $('#header').css({background: "-webkit-linear-gradient(left, #ef4848 "+scroll_percentage+"%,#262932 "+scroll_percentage+"%)" });
      $('#header').css({background: "-moz-linear-gradient(left, #ef4848 "+scroll_percentage+"%, #262932 "+scroll_percentage+"%)" });
    $('#header').css({background: "-o-linear-gradient(left, #ef4848 "+scroll_percentage+"%,#262932 "+scroll_percentage+"%)" });
    $('#header').css({background: "-ms-linear-gradient(left, #ef4848 "+scroll_percentage+"%,#262932 "+scroll_percentage+"%)" });
    $('#header').css({background: "linear-gradient(to right, #ef4848 "+scroll_percentage+"%,#262932 "+scroll_percentage+"%)" });
  }
  $(window).scroll(function() {
    scroll_fn();
  });
   
  $(window).resize(function() {
    scroll_fn();
  });
 
});

第三种效果和第二种效果的原理基本相似，只是移动的是logo上的背景颜色：

$(function() { 
 
  function scroll_fn(){
      document_height = $(document).height();
      scroll_so_far = $(window).scrollTop();
      window_height = $(window).height();
      max_scroll = document_height-window_height;
      scroll_percentage = scroll_so_far/(max_scroll/100);
      $('#header-inner-logo').css({background: "-webkit-gradient(linear, left top, right top, color-stop("+scroll_percentage+"%,#ef4848), color-stop("+scroll_percentage+"%,#FFF))" });
      $('#header-inner-logo').css({background: "-webkit-linear-gradient(left, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
      $('#header-inner-logo').css({background: "-moz-linear-gradient(left, #ef4848 "+scroll_percentage+"%, #FFF "+scroll_percentage+"%)" });
      $('#header-inner-logo').css({background: "-o-linear-gradient(left, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
      $('#header-inner-logo').css({background: "-ms-linear-gradient(left, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
      $('#header-inner-logo').css({background: "linear-gradient(to right, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
  }
  $(window).scroll(function() {
    scroll_fn();
  });
   
  $(window).resize(function() {
    scroll_fn();
  });
});

最后一张效果是修改#loading元素的宽度和使logo垂直移动背景颜色：

$(function() { 
 
  function scroll_fn(){
    document_height = $(document).height();
    scroll_so_far = $(window).scrollTop();
    window_height = $(window).height();
      
    max_scroll = document_height-window_height;
   
    scroll_percentage = scroll_so_far/(max_scroll/100);
      
     
    $('#loading').width(scroll_percentage + '%');
       
    $('#header-inner-logo').css({background: "-webkit-gradient(linear, left top, left bottom, color-stop("+scroll_percentage+"%,#ef4848), color-stop("+scroll_percentage+"%,#FFF))" });
    $('#header-inner-logo').css({background: "-webkit-linear-gradient(top, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
    $('#header-inner-logo').css({background: "-moz-linear-gradient(top, #ef4848 "+scroll_percentage+"%, #FFF "+scroll_percentage+"%)" });
    $('#header-inner-logo').css({background: "-o-linear-gradient(top, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
    $('#header-inner-logo').css({background: "-ms-linear-gradient(top, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
    $('#header-inner-logo').css({background: "linear-gradient(to top, #ef4848 "+scroll_percentage+"%,#FFF "+scroll_percentage+"%)" });
  }
  $(window).scroll(function() {
    scroll_fn();
  });
   
  $(window).resize(function() {
    scroll_fn();
  });
 
});