我在搜索同样的东西时发现了这个。我知道这是一个老问题，但我想我可以提供一个最近的答案。

Scrollorama有一个“pin it”功能，这正是我正在寻找的。

http://johnpolacek.github.io/scrollorama/

我和你有同样的问题，最终制作了一个jQuery插件来解决它。它实际上解决了人们在这里列出的所有问题，而且还增加了一些可选特性。

选项

stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};

https://github.com/donnyv/sticky-panel

演示:http://htmlpreview.github.io/?https: / / github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm

你可以简单地使用css，将你的元素定位为fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

编辑:你应该有一个绝对位置的元素，一旦滚动偏移到达元素，它应该被改变为固定，顶部位置应该被设置为零。

你可以用scrollTop函数检测文档的顶部滚动偏移量:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

当滚动偏移量达到200时，元素会粘在浏览器窗口的顶部，因为是固定放置的。

这里是如何不使用jquery(更新:看到其他答案，你现在可以只使用CSS)

var startProductBarPos=-1; window.onscroll=function(){ var bar = document.getElementById('nav'); if(startProductBarPos<0)startProductBarPos=findPosY(bar); if(pageYOffset>startProductBarPos){ bar.style.position='fixed'; bar.style.top=0; }else{ bar.style.position='relative'; } }; function findPosY(obj) { var curtop = 0; if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; } curtop += obj.offsetTop; } else if (obj.y) curtop += obj.y; return curtop; } * {margin:0;padding:0;} .nav { border: 1px red dashed; background: #00ffff; text-align:center; padding: 21px 0; margin: 0 auto; z-index:10; width:100%; left:0; right:0; } .header { text-align:center; padding: 65px 0; border: 1px red dashed; } .content { padding: 500px 0; text-align:center; border: 1px red dashed; } .footer { padding: 100px 0; text-align:center; background: #777; border: 1px red dashed; } <header class="header">This is a Header</header> <div id="nav" class="nav">Main Navigation</div> <div class="content">Hello World!</div> <footer class="footer">This is a Footer</footer>

截至2017年1月和Chrome 56的发布，大多数常用的浏览器都支持CSS中的position: sticky属性。

#thing_to_stick {
  position: sticky;
  top: 0px;
}

在火狐和Chrome浏览器中都是如此。

在Safari中，你仍然需要使用position: -webkit-sticky。

Polyfills可用于Internet Explorer和Edge;https://github.com/wilddeer/stickyfill似乎是个不错的网站。

接受的答案是有效的，但如果你在上面滚动，它不会回到之前的位置。它总是粘在顶部后，放在那里。

  $(window).scroll(function(e) {
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
      $('.fixedElement').css( 'position': 'fixed', 'top': '0px');

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

jleedev的响应应该工作，但我不能让它工作。他的示例页面也不起作用(对我来说)。