文章/答案/技术大牛

发布

社区首页 >问答首页 >用纯Javascript实现CSS - Pushpin init (没有JQuery)

问用纯Javascript实现CSS - Pushpin init (没有JQuery)
EN

Stack Overflow用户

提问于 2018-12-12 04:04:02

回答 1查看 1.5K关注 0票数 2

我正在使用Materializecssv1.0.0，并且试图不需要在图钉组件上没有成功的JQuery库。

Codepen1这种工作方式(JQuery init)

Codepen2这种方式行不通(纯JS init)

普什平帮助表示这种纯javascript方式：

document.addEventListener('DOMContentLoaded', function() {
  var elems     = document.querySelectorAll('.pushpin');
  var instances = M.Pushpin.init(elems, options);
});

此外，普什平帮助还指出了插入图钉的JQuery方式：

$(document).ready(function(){
  $('.pushpin').pushpin();
});

我有4个图钉部分(参见求职信)

<!DOCTYPE html>
<html>
<head>
  <title>Juan Varela - Cover Letter</title>
  <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection"/>
  <!--Import styles.css-->
  <link type="text/css" rel="stylesheet" href="css/styles__.css"                                                                 media="screen,projection"/>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div id="divPersonal" class="block">
    <nav class="pushpin" data-target="divPersonal">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">JUAN VARELA</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>JUAN VARELA</h1>
        </div>
      </div>
    </div>
  </div>

  <div id="divSkills" class="block">
    <nav class="pushpin" data-target="divSkills">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">SKILLS</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>SKILLS</h1>
        </div>
      </div>
    </div>
  </div>

  <div id="divEducation" class="block">
    <nav class="pushpin" data-target="divEducation">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">WORK</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>WORK</h1>
        </div>
      </div>
    </div>
  </div>

  <div id="divInterests" class="block">
    <nav class="pushpin" data-target="divInterests">
      <div class="nav-wrapper">
        <div class="container">
          <span class="brand-logo">INTERESTS</span>
        </div>
      </div>
    </nav>
    <div class="valign-wrapper vertical-align">
      <div class="valign" style="width: 100%;">
        <div class="container">
          <br><br><br>
          <h1>INTERESTS</h1>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

我试图用这样的纯Javascript来插入图钉：

document.addEventListener('DOMContentLoaded', function() {
  var pushpins         = document.querySelectorAll('.pushpin');
  var instancesPushpin = M.Pushpin.init(pushpins, {
    top:    0,
    bottom: 1000,
    offset: 0
  });
});

没有成功。只有第四节肚脐显示固定在前100%的高度屏幕。向下滚动并通过100%高的屏幕，使肚脐脱落。

使用普什平演示 JQuery方法获得预期行为(参见演示源代码https://materializecss.com/docs/js/init.js中的第160行)：

// Pushpin Demo Init
$('.pushpin').each(function() {
  var $this = $(this);
  var $target = $('#' + $(this).attr('data-target'));
  $this.pushpin({
    top:    $target.offset().top,
    bottom: $target.offset().top + $target.outerHeight() - $this.height()
  });
});

index.js代码：

/*!
 * Site Proper Javascript (not included in materialize.js)
 * No Copyright
 * No License
 */

M.AutoInit();

document.addEventListener('DOMContentLoaded', function() {
  /* Pushpin Initialization */
  /* This way works! */
  $('.pushpin').each(function() {
    var $this = $(this);
    var $target = $('#' + $(this).attr('data-target'));
    $this.pushpin({
      top:    $target.offset().top,
      bottom: $target.offset().top + $target.outerHeight() - $this.height()
    });
  });

  /* This way doesn't works! */
  // var pushpins         = document.querySelectorAll('.pushpin');
  // var instancesPushpin = M.Pushpin.init(pushpins, {
  //   top:    0,
  //   bottom: 1000,
  //   offset: 0
  // });
});

styles.css代码：

/*!
 * Site Proper Styles (not included in materialize.css)
 * No Copyright
 * No License
 */
html, body, .block {
  height: 100%;
}

nav ul li a:hover, nav ul li a.active {
  background-color: rgba(0,0,0,.1);
}

/* Class for when element is above threshold */
.pin-top {
  position: relative;
}

/* Class for when element is below threshold */
.pin-bottom {
  position: relative;
}

/* Class for when element is pinned */
.pinned {
  position: fixed !important;
}

谢谢您对纯Javascript内置puspin组件的任何帮助。

jquery

html

materialize

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-10 15:42:02

您应该：

删除M.AutoInit()；
分别初始化每个导航条以设置正确的顶部和底部属性。

document.addEventListener("DOMContentLoaded", function() {
  var pushpins = document.querySelectorAll(".pushpin");
  pushpins.forEach(function(element) {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var elemRect = element.getBoundingClientRect();
    var parentRect = element.parentElement.getBoundingClientRect();
    var elemTop = scrollTop + elemRect.top;

    var instancePushpin = M.Pushpin.init(element, {
      top: elemTop,
      bottom: elemTop + parentRect.height - elemRect.height
    });
  })
});

示例

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53735893

复制

相似问题

问用纯Javascript实现CSS - Pushpin init (没有JQuery)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用纯Javascript实现CSS - Pushpin init (没有JQuery)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用纯Javascript实现CSS - Pushpin init (没有JQuery)
EN