jQuery 底部漂浮导航当前位置突出 + 锚点平滑滚动

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* { margin:0; padding:0; }
#nav { width:100%; height:40px; line-height:40px; font-size:14px; background-color:#333; text-align:center; position:fixed; bottom:0; list-style:none; }
#nav li { float:left; }
#nav a { display:block; text-decoration:none; color:#fff; padding:0 20px; margin-left:-3px; }
#nav a:hover { background-color:#222; }
#nav .current a { background-color:#f60; }
#box { width:800px; margin:0 auto; list-style:none; }
#box li { height:1000px; display:block; background-color:#f00; }
#box #a1 { height:1000px; background-color:#f00; }
#box #a2 { height:1000px; background-color:#f20; }
#box #a3 { height:1000px; background-color:#f40; }
#box #a4 { height:1000px; background-color:#f60; }
#box #a5 { height:1000px; background-color:#f90; }
</style>
</head>

<body>




<ul id="box">
<li id="a1"><a name="a1"></a>a1</li>
<li id="a2"><a name="a2"></a>a2</li>
<li id="a3"><a name="a3"></a>a3</li>
<li id="a4"><a name="a4"></a>a4</li>
<li id="a5"><a name="a5"></a>a5</li>
<li id="a6"><a name="a6"></a>a6</li>
</ul>


<ul id="nav">
<li class="current"><a href="#a1">首页</a></li>
<li><a href="#a2">公司简介</a></li>
<li><a href="#a3">产品展示</a></li>
<li><a href="#a4">新闻中心</a></li>
<li><a href="#a5">资质认证</a></li>
<li><a href="#a6">联系我们</a></li>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
(function(e){e.fn.onePageNav=function(l){var g=e.extend({},e.fn.onePageNav.defaults,l),c={};c.sections={};c.bindNav=function(a,b,d,f){a.find("a").bind("click",function(m){var h=e(this),i=h.parent(),j=h.attr("href"),k=e(document);if(!i.hasClass(b)){c.adjustNav(a,i,b);k.unbind(".onePageNav");e.scrollTo(j,f,{onAfter:function(){if(d)window.location.hash=j;k.bind("scroll.onePageNav",function(){c.scrollChange(a,b)})}})}m.preventDefault()})};c.adjustNav=function(a,b,d){a.find("."+d).removeClass(d);b.addClass(d)};
c.getPositions=function(a){a.find("a").each(function(){var b=e(this).attr("href"),d=e(b).offset();d=d.top;c.sections[b.substr(1)]=Math.round(d)})};c.getSection=function(a){var b="",d=Math.round(e(window).height()/2);for(var f in c.sections)if(c.sections[f]-d<a)b=f;return b};c.scrollChange=function(a,b){c.getPositions(a);var d=e(window).scrollTop();d=c.getSection(d);d!==""&&c.adjustNav(a,a.find("a[href=#"+d+"]").parent(),b)};c.init=function(a,b){c.bindNav(a,b.currentClass,b.changeHash,b.scrollSpeed);
c.getPositions(a);e(document).bind("scroll.onePageNav",function(){c.scrollChange(a,b.currentClass)})};return this.each(function(){var a=e(this),b=e.meta?e.extend({},g,a.data()):g;c.init(a,b)})};e.fn.onePageNav.defaults={currentClass:"current",changeHash:false,scrollSpeed:750}})(jQuery);
</script>
<script>
$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
 
  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });
 
  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
 
});
</script>
<script>
$(document).ready(function() {
  $('#nav').onePageNav();  
});
</script>
<!-- <script>
window.onload = window.onscroll = function()
{
    var nav = document.getElementById("nav");
    var links = nav.getElementsByTagName("a");
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    
    //(top > 100) ? nav.style.display = "block" : nav.style.display = "";
    for(var i=0; i<links.length; i++)
    {
        //var myy = 
        if(top < 1000)
        {
            links[i].className = "";
            links[0].className = "current";
        }
        else
        {
            links[i].className = "";
        }
        if(top>=1000 && top < 2000)
        {
            links[i].className = "";
            links[1].className = "current";
        }
        else
        {
            links[i].className = "";
        }
        if(top>=2000 && top < 3000)
        {
            links[i].className = "";
            links[2].className = "current";
        }
        else
        {
            links[i].className = "";
        }
    }
}
</script> -->
</body>
</html>

 

 

 

http://trevordavis.net/blog/jquery-one-page-navigation-plugin

 

 

 

posted @ 2013-01-23 12:43  赵小磊  阅读(924)  评论(0编辑  收藏  举报
回到头部