老师,这个时候offsettop已经大于704了,它还是显示在0层,正常应该显示在1层的

老师,这个时候offsettop已经大于704了,它还是显示在0层,正常应该显示在1层的

老师,这个时候offsettop已经大于704了,它还是显示在0层,正常应该显示在1层的https://img1.sycdn.imooc.com//climg/62e74b920939a55619200987.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-08-01 11:55:12

同学你好,截图中并没有显示此时的滚动距离scrollTop,可以在输出查看滚动过程中的scrollTop属性值,示例:

https://img1.sycdn.imooc.com//climg/62e74e7909fab18619200926.jpg

应该是楼层的顶部挨着窗口顶部时,才会切换到对应的选项卡

https://img1.sycdn.imooc.com//climg/62e74df309f2198416320755.jpg

可以再测试下,如果还有问题,可以将你写的完整代码粘贴过来,便于帮助同学准确的定位与解决问题。

祝学习愉快~

  • 提问者 不如自成宇宙666 #1

    <script>

        var list = document.getElementById('list');

        var lis = document.querySelectorAll('#list li');

        list.onclick = function(e) {

          if (e.target.tagName.toLowerCase() == 'li') {

            var n = e.target.getAttribute('data-n');

            var contentPart = document.querySelector('.content-part[data-n=' + n + ']');

            document.documentElement.scrollTop = contentPart.offsetTop;

          }

        }


        var offsetTopArr = [];

        var contentParts = document.querySelectorAll('.content-part');

        for (var i = 0; i < contentParts.length; i++) {

          offsetTopArr.push(contentParts[i].offsetTop);

        }

        offsetTopArr.push(Infinity);

        console.log(offsetTopArr);


        var nowFloor = -1;

        window.onscroll = function() {

          var scrollTop = document.documentElement.scrollTop;

          console.log(scrollTop);

          for (var i = 0; i < offsetTopArr.length; i++) {

            if(scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i+1]) {

              break;

            }

          }

          if (nowFloor != i) {

            console.log(i);

            nowFloor = i;

            for (var j = 0; j < lis.length; j++) {

              if (j == i) {

                lis[j].className = 'current';

              }else {

                lis[j].className = '';

              }

            }

          }

        }

      </script>

    是跟着视频中老师得到代码写的,字数太多不支持,所以只复制了script部分

    2022-08-01 12:01:37
  • 提问者 不如自成宇宙666 #2

    https://img1.sycdn.imooc.com//climg/62e7516409b8f4b819200942.jpg,这是右侧显示的数值,也不太对

    2022-08-01 12:07:22
  • 同学你好,问题解答如下:

    1、右侧显示的数值与你html中每个section中设置的高度有关,所以与老师截图显示的值可能会不一样。

    2、存在小数点问题,一般是属于浏览器自身解析的问题,换个浏览器试试,或者忽略。

    3、只有在左侧楼层的顶端到达窗口顶部时,右侧才会切换到对应的导航项。同学现在是无法实现效果吗,如果是的话,可以看看总结的图文节,https://class.imooc.com/lesson/1965#mid=46715 对比下是否存在同样的问题,修改后再测试下。

    如果是有其他的疑问,可以图文结合再详细描述下,便于帮助同学准确的定位与解决问题。

    祝学习愉快~

    2022-08-01 13:30:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师