导航栏实现横向滑动效果

JavaScript021

导航栏实现横向滑动效果,第1张

<meta charset="utf-8">

例如：

需求：导航栏实现横向滑动,适应移动端，当滑动到最后时，图标隐藏

css实现滑动效果：

style样式：

.scrollContainer{overflow:auto}

.box{

display:box

display:-webkit-box//也可使用display:flex

height:"40px"

}

.box span{

display: block !important//这是重点！！

width:"60px",

height: "40px"

line-height: "40px"

text-align:center

}

<div class="scrollContainer">

<div class="box">

<span>HT</span>

<span>CTC</span>

<span>SLT</span>

<span>AET</span>

<span>LET</span>

</div>

</div>

js中实现滑动效果：

思路：

当（滑动的距离=总滑动宽度-可视宽度 || 滑动的距离>总滑动宽度-可视宽度）时，隐藏图标，相反显示

domElement.scrollLeft(滑动距离)

domElement.scrollWidth(总滑动宽度-可视宽度)

domElement.clientWidth(可视宽度)

依靠css 将页面

document.documentElement.style.overflow='hidden'

document.body.style.overflow='hidden'//手机版设置这个。

如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。

1、首先输入下方的代码：

$(window).scroll(function () {

            var $nav = $(".floatingMenu ul li"),

              length = $nav.length-1,//获取导航菜单 ul li 的个数

              item = new Array(),//新建一个数组

              sTop = $(window).scrollTop()//获取偏移的高度

          for (var i = 0i <lengthi++) {

2、然后输入下方的代码：

if (i == 0) {

                  item[i + 1] = $(".blockList>div:first-child").offset().top

                  if (sTop >= item[i + 1]) {

                       $nav.eq(i).addClass("selected").siblings("li").removeClass("selected")//选中的样式selected

                   }

               } else {

3、然后输入下方的代码：

item[i + 1] = $(".blockList>div:nth-child(" + (i + 1) + ")").offset().top

                   if (sTop >= item[i + 1] - 100) {

                       $nav.eq(i).addClass("selected").siblings("li").removeClass("selected")

                  }

               }

           }

       })

4、然后就可以了。