限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

jquery响应式垂直时间轴滚动锚点定位插件

所属分类: 网页特效-列表&布局    2023-07-25 02:27:51

jquery响应式垂直时间轴滚动锚点定位插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery响应式垂直时间轴滚动锚点定位插件(共6个文件)

    • script.js
    • index.html
    • style.css

使用方法

$(function () {
  function sumSection() {
    return $(".container").height();
  }
  function setDimensionBar() {
    $(".bar").css({
      "height": $(window).height() / sumSection() * 100 + "%" });

  }
  function setSection() {
    $.each($("section"), function (i, element) {
      $(element).css({
        "min-height": $(window).height() });

    });
  }

  function addBehaviours() {
    let sections = $("section");
    $.each($(".node"), function (i, element) {
      $(element).on("click", function (e) {
        e.preventDefault();
        let scroll = $(sections[i]).offset().top;
        $('html, body').animate({
          scrollTop: scroll },
        500);
      });
    });
  }

  function arrangeNodes() {
    $(".node").remove();
    $.each($("section"), function (i, element) {
      let name = $(element).data("name");
      let node = $("
  • " + name + "
  • "); $(".indicator").append(node); $(node).css({ "top": $(".indicator").height() / $(document).height() * $(element).offset().top }); }); addBehaviours(); } $(window).on("scroll", function () { let top = window.scrollY / sumSection() * 100; $(".bar").css({ "top": top + "%" }); }); $(window).on("resize", function () { setSection(); arrangeNodes(); setDimensionBar(); }); setTimeout( function () { setSection(); arrangeNodes(); setDimensionBar(); }, 200); });

    站长提示:
    1. 苦力吧素材官方QQ群:950875342
    2. 平台上所有素材资源,需注册登录会员方能正常下载。
    3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
    4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
    5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
    相关资源 / 列表&布局

    jquery+CSS创建的鼠标悬停显示排行榜特效

    一款问答平台积分排名特效,鼠标悬停在卡片上随即显示当前会员排名情况。
      列表&布局
     5248  0

    CSS三栏新闻动态列表样式布局代码

    一款新闻列表布局代码,三列纵向列表布局,每列头部带图片显示。
      列表&布局
     8154  0

    VanillaJS创建的自定义添加/删除带有卡片布局

    当单击删除按钮时,相应的卡片会平滑的消失。当添加新的卡片时,它会随机背景颜色。
      列表&布局
     2448  0

    html+css创建的网上商城网站头部模块布局代码

    一款蓝色风格网站头部模块布局,适用于电商网购平台header头部模块模板,带搜索框、导航菜单等。
      列表&布局
     5246  0

    评论数(1) 回复有机会获得K币 用户协议

      kuli80
      2023-09-20 13:13:20
    😀
    • 😀
    • 😊
    • 😂
    • 😍
    • 😑
    • 😷
    • 😵
    • 😛
    • 😣
    • 😱
    • 😋
    • 😎
    • 😵
    • 😕
    • 😶
    • 😚
    • 😜
    • 😭
    发表评论