这不是一个确切的解决方案，但却是一个很好的选择

这个CSS只有屏幕滚动条顶部。解决了所有的问题，只有CSS，没有JavaScript，没有JQuery，没有脑力劳动(lol)。

享受我的小提琴:D所有的代码都包括在那里:)

CSS

#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

把内容放长一点，这样你就能看到效果了:) 哦，推荐人也在里面，因为他值得表扬

CSS只有屏幕滚动条的顶部

您已经在谷歌Code的发行页面和Stack Overflow的编辑页面上看到过这个例子。

当你向上滚动时，CMS的答案不会恢复定位。以下是从Stack Overflow窃取的无耻代码:

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}

<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script> 

还有一个简单的现场演示。

一个新兴的、无脚本的替代方案是position: sticky, Chrome、Firefox和Safari都支持它。请参阅HTML5Rocks和demo上的文章以及Mozilla文档。

我和你有同样的问题，最终制作了一个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

最简单的解决方案(没有js): 演示

.container {
  position: relative;
}
.sticky-div {
    position: sticky;
    top: 0;
}

<div class="container">
  <h1>
    relative container & sticky div
  </h1>
  <div class="sticky-div"> this row is sticky</div>
  <div>
    content
  </div>
</div>

这就是我用jquery做的。这都是根据堆栈溢出的各种答案拼凑起来的。这个解决方案缓存选择器以获得更快的性能，并且还解决了当粘性div变得粘性时的“跳跃”问题。

在jsfiddle: http://jsfiddle.net/HQS8s/上查看它

CSS:

.stick {
    position: fixed;
    top: 0;
}

JS:

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});

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

  $(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的响应应该工作，但我不能让它工作。他的示例页面也不起作用(对我来说)。