导航栏固定、锚点平滑滚动

Michael_Lin 发布于2019-08-02 16:12 / 399人阅读

摘要：页面用的框架页面布局导航导航一导航二导航三导航四导航栏固定页面滚动时导航栏高亮显示方案一为页面添加页面滚动监听事件滚动条距离顶端值滚动条距离顶端值加循环距离顶端值判断滚动条位置清除类

页面用的Bootstrap框架

页面布局

导航栏固定,页面滚动时导航栏高亮显示 方案一：

$(window).scroll(function() {
  //为页面添加页面滚动监听事件
  var wst = $(window).scrollTop() //滚动条距离顶端值
  console.log("滚动条距离顶端值:" + wst)
  var len = 5;
  for (var i = 1; i < len; i++) { //加循环
    console.log("item距离顶端值:" + $("#part" + i).offset().top);

    var next = i + 1;
    var itemOffsetTop = $("#part" + i).offset().top;

    console.log(i);
    if (i === (len - 1)) {
      var condition = itemOffsetTop <= wst;
    } else {
      var itemNextOffsetTop = $("#part" + next).offset().top;
      var condition = itemOffsetTop <= wst && itemNextOffsetTop >= wst;
    }
    console.log(condition, i)
    if (condition) { //判断滚动条位置
      $(".navbar-nav li").removeClass("active"); //清除c类
      $("#navbar" + i).addClass("active"); //给当前导航加c类
    }
  }
})

方案二：

1. 导航栏固定不透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length-1, // 获取导航菜单 ul li 的个数
      item = new Array(), // 新建一个数组
      sTop = $(window).scrollTop(); // 获取偏移的高度
  for (var i = 0; i < length; i++) {
      if (i == 0) {
          item[i + 1] = $(".page-wrapper>div:first-child").offset().top;
          if (sTop >= item[i + 1]) {
            $nav.eq(i).addClass("active").siblings("li").removeClass("active");
          }
      } else {
          item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
          if (sTop >= item[i + 1] - 100) {
              $nav.eq(i).addClass("active").siblings("li").removeClass("active");
          }
      }
  }
})

2. 导航栏固定透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length, // 获取导航菜单 ul li 的个数
      item = new Array(), // 新建一个数组
      sTop = $(window).scrollTop(); // 获取偏移的高度
  for (var i = 0; i < length; i++) {
    item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
    if (sTop >= item[i + 1]) {
        $nav.eq(i).addClass("active").siblings("li").removeClass("active");
    }
  }
})

方案三：

利用Bootstrap的data-spy="scroll"










$("body").scrollspy({ target: ".navbar-default" })

锚点平滑滚动

$("a").click(function(){
    //根据a标签的href转换为id选择器，获取id元素所处的位置，并高度减50px（这里根据需要自由设置）
    $("html,body").animate({scrollTop: ($($(this).attr("href")).offset().top)}, 500);
});

GPU云服务器云服务器视图平滑滚动 js平滑滚动 html 滚动锚点导航栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54849.html

导航栏固定、锚点平滑滚动

摘要：页面用的框架页面布局导航导航一导航二导航三导航四导航栏固定页面滚动时导航栏高亮显示方案一为页面添加页面滚动监听事件滚动条距离顶端值滚动条距离顶端值加循环距离顶端值判断滚动条位置清除类页面用的Bootstrap框架页面布局 Toggle navigation ...

xcold 2019-08-23 16:49 评论0 收藏0
单页面官网-平滑过渡到指的锚点

摘要：特点单页面官网不是传说中的单页面应用固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意，这给当前样式单独做了一个层，绝对定位，鼠标移动特点单页面官网--不是传说中的单页面应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如：考拉微课 HTML布局 ...

zhaot 2019-08-01 17:28 评论0 收藏0
单页面官网-平滑过渡到指的锚点

摘要：特点单页面官网不是传说中的单页面应用固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意，这给当前样式单独做了一个层，绝对定位，鼠标移动特点单页面官网--不是传说中的单页面应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如：考拉微课 HTML布局 ...

SegmentFault 2019-08-20 18:56 评论0 收藏0
单页面官网-平滑过渡到指的锚点

摘要：特点单页面官网不是传说中的单页面应用固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意，这给当前样式单独做了一个层，绝对定位，鼠标移动特点单页面官网--不是传说中的单页面应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如：考拉微课 HTML布局 ...

tianhang 2019-08-29 13:13 评论0 收藏0
认识一下 Material Design Lite 布局组件

摘要：布局组件需要按特定的结构进行声明需要指出的是，在一个布局声明中，等子元素不一定全部使用，比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、屏幕尺寸和设备。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

wanglu1209 2019-08-28 18:17 评论0 收藏0