jquery - 滚动过去后如何使 div 内的元素变粘？

Question

我该如何做到这一点，以便当用户滚动到关闭按钮“关闭”时，它会卡在页面顶部？

要注意的是，我希望它与窗口的右侧对齐(右:0px)，并且“关闭”包含在一个 div“容器”中，该容器的宽度为 500 像素，并以 margin: auto 为中心。

我尝试这样做，所以当您滚动经过该元素时，它会添加一个位置为固定的“粘性”类。这似乎行不通。

jsFiddle:http://jsfiddle.net/7j18fwpa/

jQuery:

var top = $('.close').offset().top;
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top)
        $('.close').addClass('sticky');
    else
        $('.close').removeClass('sticky');
            $('.close').width($('.close').parent().width());
});

Answer 1

在您的情况下，您试图使绝对定位元素相对于其容器具有粘性。

我已经把你的 jsfiddle 改成了这样:
http://jsfiddle.net/7j18fwpa/3/

所以你将拥有:

HTML:

<div class="container">
    <div class="close sticky">CLOSE</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut dui nisi. Morbi cursus nibh eget imperdiet gravida. Etiam ultricies lectus quis mollis mattis. Quisque at tincidunt nisl, ut commodo turpis. Sed dapibus mi porta, tempor metus et, luctus mi. Donec hendrerit odio at augue mollis interdum. Vestibulum efficitur metus eget diam tempor egestas. Maecenas sit amet urna consectetur, ultrices tortor sit amet, convallis odio. Phasellus ut ante luctus, elementum est consequat, cursus velit. Phasellus eleifend massa in tellus sagittis, id viverra risus efficitur. Fusce auctor a nisi in mollis. Cras auctor ullamcorper consectetur. Nunc imperdiet feugiat nulla non tincidunt. Praesent pulvinar ut lacus sit amet sagittis. Sed et elit in ipsum elementum lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed volutpat enim, sit amet varius elit. Sed vel diam consequat, lobortis diam vitae, aliquet diam. Morbi eget erat metus. Cras eget sollicitudin velit, eu cursus erat. Sed placerat, magna vitae feugiat rhoncus, ex turpis varius magna, nec laoreet nulla magna ac eros. Curabitur ut sollicitudin nibh. Proin et accumsan eros.</p>
</div>

CSS:

.container{
    width: 500px;
    height: 500px;
    background: red;
    margin: auto;
    position:relative;
}

.close{
    background: blue;
    width: 50px;
    height: 20px;
    position: absolute;
    right:0;
    top:100px;
}

JS:

$(function(){ // document ready

  if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

    var containerTopOffset = $('.container').offset().top; // get offset the container
    var stickyTopOffset = $('.sticky').offset().top; // get offset of the sticky element
    var stickyTopCss = parseInt($('.sticky').css('top'), 10); // get original top pixels set on the sticky element from css

    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number 
      if (stickyTopOffset < windowTop){
        $('.sticky').css({ top: (windowTop-containerTopOffset) }); // set new top value for the sticky element that would be the window offset minus the container's offset
      } else {
        $('.sticky').css({ top: stickyTopCss }); // restore the original top value of the sticky element
      }
    });

  }

});