拖动滚动条实现侧栏导航定位效果

快乐打工仔 分类:实例代码

大家可能看到过这样的导航效果,那就是拖动滚动条的时候,能够实现侧栏导航定位效果。

也就是说没到滚动条移动到一个栏目位置,那么侧栏导航也能够实现定位,下面就通过代码实例详细介绍一下如何实现此功能,需要的朋友可以做一下参考,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
body, html {
  background-color: #f6f6f6;
}
div {
  height: 600px;
  line-height: 500px;
  border: solid 1px #ccc;
  background-color: #fff;
  text-align: center;
}
ul {
  position: fixed;
  height: 40px;
  line-height: 40px;
  top: 100px;
}
li {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: solid 1px #ccc;
}
li:hover {
  background-color: #ccc;
  color: #fff;
}
li.active {
  background-color: #cc5;
  color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('li').on('click', function () {
    var index = $(this).index();
    var scrollTo = $('.content').eq(index).offset().top;
    $('body').animate({
      scrollTop: scrollTo
    }, 200);
 
    $(this).addClass('active').siblings().removeClass('active');
  })
 
  var barItemTops = [];
  $('li').each(function (index, element) {
    barItemTops.push($(this).position().top + 100);
  })
  console.log(barItemTops)
  $(window).on('scroll', function () {
    var winScrollTop = $(this).scrollTop();
    $('.content').each(function (index, element) {
      var selfOffsetTop = $(this).offset().top;
      if (0 <= selfOffsetTop - winScrollTop && selfOffsetTop - winScrollTop < barItemTops[index]) {
        $('li').eq(index).addClass('active').siblings().removeClass('active');
      }
    })
  })
})
</script>
</head>
<body>
<ul class="nav">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<div class="content div1">犀牛前端部落一</div>
<div class="content div2">犀牛前端部落二</div>
<div class="content div3">犀牛前端部落三</div>
<div class="content div4">犀牛前端部落四</div>
<div class="content div5">犀牛前端部落五</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).左侧导航条固定效果是由如下代码实现的:

ul {
  position: fixed;
  height: 40px;
  line-height: 40px;
  top: 100px;
}

top值等于100px要特别注意一下,因为后面会用到。

(2).鼠标悬浮导航栏目实现变色效果是由如下代码实现的:

ul {
  position: fixed;
  height: 40px;
  line-height: 40px;
  top: 100px;
}

(3).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

(4).$('li').on('click', function () {}),为li元素注册时间处理函数,当点击li元素的时候也能够实现导航效果。

(5).var index = $(this).index(),获取当前点击li元素的索引值。

(6).var scrollTo = $('.content').eq(index).offset().top,获取对应索引的div元素距离文档顶端的距离。

(7).$('body').animate({  scrollTop: scrollTo

}, 200),以动画方式设置body的scrollTop值,这样就会使对应索引的div块顶端到达窗口顶端。

(8).$(this).addClass('active').siblings().removeClass('active'),为当前元素添加名称为active的样式类,其他的li元素则删除它,于是就实现了当前li元素呈现绿色的效果。

(9).var barItemTops = [],声明一个数组,后面会用到。

(10).$('li').each(function (index, element) {  

  barItemTops.push($(this).position().top + 100);

}),获取每一个li元素的position().top值,再加上100,恰好是每一个li元素顶端,距离窗口顶端的尺寸。

(11).$(window).on('scroll', function () {}),为window注册scroll事件处理函数。

(12).var winScrollTop = $(this).scrollTop(),网页向上滚动的尺寸。

(13).$('.content').each(function (index, element) {}),遍历每一个div元素。

(14).var selfOffsetTop = $(this).offset().top,获取div元素距离文档顶部的距离。

(15).if (0 <= selfOffsetTop - winScrollTop && selfOffsetTop - winScrollTop < barItemTops[index]) {

  $('li').eq(index).addClass('active').siblings().removeClass('active');

},selfOffsetTop - winScrollTop值就是div元素的顶端距离窗口顶端的尺寸。

也就是如果这个尺寸大0并且小于侧边栏导航对应的li元素顶端距离窗口顶端的距离,那么将设置对应li元素的相关样式。

拖动滚动条实现侧栏导航定位效果,这样的场景在实际项目中还是用的比较多的,关于拖动滚动条实现侧栏导航定位效果就介绍到这了。

拖动滚动条实现侧栏导航定位效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容