Javascript 使元素固定在卷轴上

当用户向下滚动到导航栏时，我试图使导航栏粘贴到顶部，然后当用户向后滚动到导航栏上方时，取消粘贴。我知道这只能通过JavaScript实现。我是JavaScript的初学者，所以越简单越好

HTML格式如下：

   <section class="main">
     <div id="wrap">
        <div id="featured">
     <div class="wrap">      
  <div class="textwidget">
    <div class="cup"><img src="#""></div>
<div id="header"></div></div></div></div></div></div></div>
<div class="whiteboard">
         <h1><a href="#">HELLO GUYS</a></h1> </div>
   </div>
          <div class="bg1">
            <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>

      .main{text-align:center;}

      h1{
          -webkit-font-smoothing: antialiased;
              display:inline-block;
            font: 800 1.313em "proxima-nova",sans-serif; 
            padding: 10px 10px;
            margin: 20px 20px;
            letter-spacing: 8px;
            text-transform: uppercase;
              font-size:3.125em;
              text-align: center; 
              max-width: 606px;
      line-height: 1.45em;
      position: scroll;
          background-color:#e94f78;
          text-decoration: none;
          color:yellow;
          background-image:url;
      }

      h1 a{
        text-decoration: none;
        color:yellow;
                padding-left: 0.15em;
      }

      h2{
          -webkit-font-smoothing: antialiased;
              display:inline-block;
            font: 800 1.313em "proxima-nova",sans-serif; 
            letter-spacing: 8px;
            margin-top: 100px;
            text-transform: uppercase;
              font-size:3.125em;
              text-align: center; 
      line-height: 1.45em;
      position: scroll;
          text-decoration: none;
          color:white;
          z-index: -9999;
      }

      h2 a{
        text-decoration: none;
        color:white;
                padding-left: 0.15em;
      }

      h5{

      position: absolute;
              font-family:sans-serif; 
              font-weight:bold; 
              font-size:40px; 
              text-align: center; 
              float: right;
              background-color:#fff;
              margin-top: -80px;
              margin-left: 280px;
      }

      h5 a{

        text-decoration: none;
        color:red;
      }

      h5 a:hover{

        color:yellow;
      }

      #text1{
          -webkit-font-smoothing: antialiased;
              display:inline-block;
            font: 800 1.313em "proxima-nova",sans-serif; 
            margin: 20px 20px;
            letter-spacing: 8px;
            text-transform: uppercase;
              font-size:3.125em;
              text-align: center; 
              max-width: 606px;
      line-height: 1.45em;
      position: scroll;
          background-color:#E94F78;

      }

      #text1 a{
          color:yellow;
          text-decoration: none;
              padding-left: 0.15em;


      }

      #text1 a:hover{

          text-decoration: none;
          cursor:pointer;
      }

      .whiteboard{
          background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
          background-position: center;
          padding: ;
          background-color: #fff;
          z-index: 1000;
      }

      .bg{
        height:2000px;
        background-color:#ff0;
        background-image:url(http://alwayscreative.net/images/stars-last.jpg);
        position:relative;
        z-index: -9999;

      }
      .bg1{
        background-image:url(http://alwayscreative.net/images/stars-last.jpg);
        z-index: -9999;
        height:1000px;
      }
      /* Header */
      #wrap {
        margin: 0 auto;
        padding: 0;
        width: 100%;
      }

      #featured {
        background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
        background-size: 385px 465px;
        color: #fff;
        height: 535px;
        overflow: hidden;
        position: relative;
        z-index: -2;
      }


      #featured .wrap {
        overflow: hidden;
        clear: both;
        padding: 70px 0 30px;
        position: fixed;
        z-index: -1;
        width: 100%;
      }


      #featured .wrap .widget {
        width: 80%;
        max-width: 1040px;
        margin: 0 auto;
      }

      #featured h1,
      #featured h3,
      #featured p {
        color: yellow;
        text-shadow: none;
      }

      #featured h4{
        color:white;
        text-shadow:none;
      }

      #featured h4 {
        margin: 0 0 30px;
      }

      #featured h3 {
        font-family: 'proxima-nova-sc-osf', arial, serif;
        font-weight: 600;
        letter-spacing: 3px;
      }

      #featured h1 {
        margin: 0;
      }

      .textwidget{
        padding: 0;
      }

      .cup{
        margin-top:210px;
        z-index: 999999;
      }

      .container{font-size:14px; margin:0 auto; width:960px}
      .test_content{margin:10px 0;}
      .scroller_anchor{height:0px; margin:0; padding:0;background-image:url()}
      .scroller{background:#FFF;
        background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
       margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

---

您可以通过一些简单的jQuery实现这一点：

---

你可以去较少的CSS网站

---

他们的可停靠菜单重量轻，性能良好。唯一需要注意的是，效果发生在卷轴完成后。只需查看源代码即可查看js。

您也可以使用css进行查看

只需使用

位置：固定
当你向下滚动时，你想要修复的内容

这里有一些例子：


您要使用的。这是一个非常简单的插件，完全符合您的描述

最直接的实现

    $('.thing').waypoint(function(direction) {
  alert('Top of thing hit top of viewport.');
});

您将需要设置一些自定义CSS来精确设置它被卡住的位置，尽管对于大多数方法来说这是正常的

将向您展示您需要的所有示例和信息

以下是一个停止和启动的示例，以供将来参考。这是一个“在野外”的例子。
我不会为jQuery或更少的东西而烦恼。在我看来，javascript框架太过了

window.addEventListener('scroll', function (evt) {

  // This value is your scroll distance from the top
  var distance_from_top = document.body.scrollTop;

  // The user has scrolled to the tippy top of the page. Set appropriate style.
  if (distance_from_top === 0) {

  }

  // The user has scrolled down the page.
  if(distance_from_top > 0) {

  }

});

在实施这一点时，存在一些问题，而最初接受的答案没有回答这些问题：

窗口的
onscroll
事件经常触发。这
意味着您必须使用性能非常好的侦听器，或者
你得设法拖延听众。jQuery创建者John Resig
说明如何
延迟机制可以实现，原因是什么
去做吧。在我看来，考虑到当今的浏览器和环境
性能监听器也可以
position:fixed在css中的工作方式，如果您向下滚动页面并将元素从position:static移动到
position:fixed
，页面将稍微“跳跃”，因为文档“松开”了元素的高度。您可以通过将高度添加到
scrollTop
并用另一个对象替换文档正文中丢失的高度来消除此问题。您还可以使用该对象确定粘滞项是否已移动到
位置：固定
，并减少对代码的调用，将
位置：固定
还原到原始状态：
现在，处理程序在性能方面唯一昂贵的事情就是每次调用时调用
scrollTop
。由于区间绑定处理程序也有它的缺点，因此我将在这里进一步论证，您可以将事件侦听器重新附加到原始滚动事件，使其感觉更加快速，而无需担心。不过，您必须在每个目标/支持的浏览器上对其进行评测
代码如下：

JS

HTML


上面有些内容很粘
…一些长文本。。。
这是粘性的
一些随机页面内容…一些非常长的文本。。。
给你，没有框架，简洁明了：

var el = document.getElementById('elId');
var elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

window.addEventListener('scroll', function(){
    if (document.documentElement.scrollTop > elTop){
        el.style.position = 'fixed';
        el.style.top = '0px';
    }
    else
    {
        el.style.position = 'static';
        el.style.top = 'auto';
    }
});

纯Javascript解决方案（）：












这是窗户






































var myyElement=document.getElementById（“myyy_-bar”）；
var EnableConsoleLOGS=true//在滚动时，在浏览器的检查器（控制台）中检查结果
// ==============================================
window.addEventListener（'scroll'，函数（evt）{
var Positionsss=GetTopLeft（）；
if（EnableConsoleLOGS）{console.log（Positionsss）；}
如果（Positionsss.toppp>70）{myyElement.style.position=“relative”myyElement.style.top=“0px”myyElement.style.right=“auto”}
else{myyElement.style.position=“fixed”myyElement.style.top=“100px”myyElement.style.right=“0px”}
});
函数GetOffset（对象，偏移）{
如果（！object）返回；
offset.x+=object.offsetLeft；offset.y+=object.offsetTop；
GetOffset（object.offsetParent，offset）；
}
函数GetScrolled（对象，滚动）{
如果（！object）返回；
滚动的.x+=object.scrollLeft；滚动的.y+=object.scrollTop；
如果（object.tagName.toLowerCase（）！=“html”）{GetScrolled（object.parentNode，scrolled）；}
}
函数GetTopLeft（）{
var offset={x:0，y:0}；GetOffset（myyElement.parentNode，offset）；
var scrolled={x:0，y:0}；GetScrolled（myyElement.parentNode.parentNode，scrolled）；
var posX=offset.x-scrolled.x；var posY=offset.y-scrolled.y；
返回{lefttt:posX，toppp:posY}；
}
// ==============================================
最简单的方法如下：

var elementPosition = $('#navigation').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('#navigation').css('position','fixed').css('top','0');
        } else {
            $('#navigation').css('position','static');
        }    
});

最近对我有效的解决方案是：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

var header = document.getElementById("filters-tab");
var sticky = header.offsetTop;

if (window.pageYOffset > sticky) {
  header.classList.add("fixed");
} else {
  header.classList.remove("fixed");
}

您的JSFIDLE有错误。确保不要添加本地资源。谢谢，我刚刚意识到。为什么你说你是JAVA初学者？也许你指的是JavaScript？请记住，JavaScript与JAVA完全无关，除了名称中的公共前缀：PYeah，JavaScript之所以这样命名是因为JAVA取得了巨大的成功（或者你喜欢的宣传）。在inventor Netscape之前，它被称为LiveScript（有人记得吗？）。您希望它能在哪些浏览器上工作？这是您问题的最大变体。此外，并非所有浏览器都能正确呈现
固定的
CSS。所有的现代浏览器都会，但传统浏览器（甚至诺基亚N900上的Opera）不会这么好。较短的滚动回调：
$（'#navigation'）.css（'position'，（$（window.scrollTop（）>elementPosition.top）？“fixed'：'relative'）
（并在CSS中设置
top:0
）——2015年，使用此解决方案，IE仍存在性能问题，您有其他想法吗？但要有广泛的br
<div class="container">
  <div id="page-above" class="content">
    <h2>Some Content above sticky</h2>
    ...some long text...
  </div>
  <div id="sticky" class="sticky">This is sticky</div>
  <div id="page-content" class="content">
    <h2>Some Random Page Content</h2>...some really long text...
  </div>
</div>

window.addEventListener("scroll", function(evt) {
    var pos_top = document.body.scrollTop;   
    if(pos_top == 0){
       $('#divID').css('position','fixed');
    }

    else if(pos_top > 0){
       $('#divId').css('position','static');
    }
});

var el = document.getElementById('elId');
var elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

window.addEventListener('scroll', function(){
    if (document.documentElement.scrollTop > elTop){
        el.style.position = 'fixed';
        el.style.top = '0px';
    }
    else
    {
        el.style.position = 'static';
        el.style.top = 'auto';
    }
});

<br/><br/><br/><br/><br/><br/><br/>
<div>
  <div id="myyy_bar" style="background:red;"> Here is window </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


<script type="text/javascript">
var myyElement = document.getElementById("myyy_bar"); 
var EnableConsoleLOGS = true;           //to check the results in Browser's Inspector(Console), whenever you are scrolling
// ==============================================



window.addEventListener('scroll', function (evt) {
    var Positionsss =  GetTopLeft ();  
    if (EnableConsoleLOGS) { console.log(Positionsss); }
    if (Positionsss.toppp  > 70)    { myyElement.style.position="relative"; myyElement.style.top = "0px";  myyElement.style.right = "auto"; }
    else                            { myyElement.style.position="fixed";    myyElement.style.top = "100px";         myyElement.style.right = "0px"; }
});



function GetOffset (object, offset) {
    if (!object) return;
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
    if (!object) return;
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html") {          GetScrolled (object.parentNode, scrolled);        }
}

function GetTopLeft () {
    var offset = {x : 0, y : 0};        GetOffset (myyElement.parentNode, offset);
    var scrolled = {x : 0, y : 0};      GetScrolled (myyElement.parentNode.parentNode, scrolled);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
// ==============================================
</script>

var elementPosition = $('#navigation').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('#navigation').css('position','fixed').css('top','0');
        } else {
            $('#navigation').css('position','static');
        }    
});

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

var header = document.getElementById("filters-tab");
var sticky = header.offsetTop;

if (window.pageYOffset > sticky) {
  header.classList.add("fixed");
} else {
  header.classList.remove("fixed");
}