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

这个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只有屏幕滚动条的顶部

这里是如何不使用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>

粘到页脚碰到div:

function stickyCostSummary() {
    var stickySummary = $('.sticky-cost-summary');
    var scrollCostSummaryDivPosition = $(window).scrollTop();
    var footerHeight = $('#footer').height();
    var documentHeight = $(document).height();
    var costSummaryHeight = stickySummary.height();
    var headerHeight = 83;
    var footerMargin = 10;
    var scrollHeight = 252;
    var footerPosition = $('#footer').offset().top;

    if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeAttr('style');
        stickySummary.addClass('fixed');

    } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeClass('fixed');
        stickySummary.css({
          "position" : "absolute",
          "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
      });
    } else {
        stickySummary.removeClass('fixed');
        stickySummary.css({
            "position" : "absolute",
            "top" : "0"
        });
    }
}

$window.scroll(stickyCostSummary);

最简单的解决方案(没有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>

我使用了上面的一些工作来创建这项技术。我改进了它，并认为我将分享我的工作。希望这能有所帮助。

jsfiddle 代码

function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();​

这是一种更动态的滚动方式。它确实需要一些工作，我会在某个时候把它变成一个插头，但这是我工作几个小时后想出的。

这是另一种选择:

JAVASCRIPT

var initTopPosition= $('#myElementToStick').offset().top;   
$(window).scroll(function(){
    if($(window).scrollTop() > initTopPosition)
        $('#myElementToStick').css({'position':'fixed','top':'0px'});
    else
        $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});

你的#myElementToStick应该以position:absolute CSS属性开始。