吃盐236 2021-05-21 14:40 采纳率: 100%
浏览 228
已采纳

js如何获取section的id名称内容?

刚开始学js,想做一个随着页面下滑改变位置和内容的时间线。

我打算让他的内容为离它最近的section的id名称,js代码如下:

var isDragging = false;
var sliderTop,pointerPos,currentSection;

var bodyHeight = $('body').height();
var sliderHeight = $('.slider-navigation').height();
var elementHeight = $('section').height();
var sectionAmount = $('section').length;
var scale = (bodyHeight - (elementHeight)) / (sliderHeight - $('.nav-pointer').outerHeight() );





function updatePos() {
  currentSection = $(window).scrollTop() / elementHeight;
  currentSectionName =  ;
  sliderTop = $(window).scrollTop() / scale;
  $('.nav-pointer').css('top', sliderTop).text(currentSectionNum);
}



$(window).scroll(function(){
  if (!isDragging) {
    updatePos();
  }
});

currentsectionName =部分不会写了 其它部分也不知道有没有错,请大佬解惑。

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-05-21 14:47
    关注

    这种效果?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <title>jquery实现章节目录效果</title>
    <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
    <style>
    body{background-attachment:fixed;background-image:url(about:blank)}/*修正IE6下浮动层闪动*/
    #anchor{position:fixed;top:150px;right:0px;border:solid 1px black;}
    #anchor.fixie6{position:absolute;top:expression(eval(document.documentElement.scrollTop)+150);}
    #anchor a{text-decoration:none;color:blue;}
    #anchor a.focus{background:red;color:white;}
    </style>
    <script>
        if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.fixIE6= true<\/script><![endif]-->');//增加是否为IE6的判断
        window.onload = function () {
            var strict = document.compatMode == 'CSS1Compat', contents = $('div>a[name]:first-child'), anchors, s = [];
            contents.each(function () { s[s.length] = '<a href="#' + this.name + '">' + this.name + '</a>'; });
            anchors = $('<div id="anchor"' + (window.fixIE6 ? ' class="fixie6"' : '') + '>' + s.join('<br>') + '</div>').appendTo(document.body).find('a'); //添加文章的章节目录
            contents = contents.parent(); //更新章节锚点为内容节点
            //计算内容节点的上端点和下端点
            contents.each(function () { var o = $(this); o.data('top-bottom', { top: o.offset().top, bottom: o.offset().top + o.height() }); });
            $(window).scroll(function () {
                var viewTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop); //可见高度顶部
                var viewBottom = document[strict ? 'documentElement' : 'body'].clientHeight + viewTop; //可见高度底部
                contents.each(function (index, el) {
                    var tb = $(this).data('top-bottom');
                    if ((tb.top > viewTop && tb.top < viewBottom) || (tb.bottom > viewTop && tb.bottom < viewBottom) || (tb.top < viewTop && tb.bottom > viewBottom))
                        anchors.eq(index).addClass('focus');
                    else
                        anchors.eq(index).removeClass('focus');
                }).trigger('scroll');
            });
        };
    </script>
    <div style="height:800px"><a name="anchor1">anchor1</a></div>
    <div style="height:800px"><a name="anchor2">anchor2</a></div>
    <div style="height:800px"><a name="anchor3">anchor3</a></div>
    <div style="height:800px"><a name="anchor4">anchor4</a></div>

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
  • ¥20 Excel数据自动录入表单并提交
  • ¥30 silcavo仿真,30分钟,只需要代码
  • ¥15 FastReport 怎么实现打印后马上关闭打印预览窗口
  • ¥15 利用3支股票数据估计其均值和方差的95%置信区间。
  • ¥15 微信小程序运行一项功能时,弹出未知错误弹框,检查代码没有问题
  • ¥15 ATAC测序生成self-pseudo replicates之前是否要进行去线粒体reads
  • ¥15 python模糊字匹配函数问题
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部