Question

我想使用meteor创建一个粘性元素，其中元素将滚动直到它到达页面顶部，在这种情况下它将保留在那里。

具体来说，我想要一个“两阶段”导航栏，第一部分消失，因为一个向下滚动，下半部分固定在页面顶部。

我无法在任何地方找到如何在流星上处理此问题，并且here显示您无法使用窗口滚动事件。

我尝试了here和here方法的组合（参见下面的编辑），但无法使其正常工作！

有人可以帮我解决一下如何在流星中实现这一点吗？

修改

这是一个我正在尝试的事情的例子，如果这有帮助，但它是如此破碎，页面甚至不会加载！

的layout.html：

<template name="layout">

  <div class="banner">
      <!-- A full strip of text/logos ect -->
  </div>

 <div class ="headerAnchor"></div>

 <header id="header" class="relative">
     <!-- The navbar with all the links-->
 </header>

</template>

layout.js：

Template.layout.onRendered(function(){
  this.$anchor =$("#headerAnchor");
  this.$header = $("#header");

  this.navBarScrollHandler=function(){
   let st=$(window).scrollTop();
   let ot=this.$anchor.offset().top;
   if(st>ot){
     this.$header.removeClass(relative).addClass(fixed-on-top);
   }else if(st<=ot){
     this.$header.removeClass(fixed-on-top).addClass(relative);
   }
  }.bind(this);

  $window.on("scroll",this.navBarScrollHandler);

 });

Template.layout.onDestroyed(function(){
   $(window).off("scroll", this.scrollHandler);
});

的main.css：

.fixed-on-top{
  position:fixed;
  top:0px;
 }  

.relative{
  position:relative !important;
 }

PS：我希望header在banner不在页面之前有相对位置，然后将header固定在顶部，除非你滚动所有再次出现banner会重新出现。

如何在流星中制作粘性元素

0 个答案: