javascript - 如何使用 .offset.top 结束固定元素

Question

我正在使用 Javascript 代码.offset.top来修复一个元素，但我想在到达另一个元素时结束它。

<script>
    $(document).ready(function (){
        var sidebartop = $('.single-content').offset().top;
        $(window).scroll(function (event){
            var y = $(this).scrollTop();
            if ( y>= sidebartop ){
                $('#sharing-links').addClass('fixed');
            } else {
                $('#sharing-links').removeClass('fixed');
            }
        });
    });
</script>

这是html

    <div id="sharing-links">
    <!-- this is the fixed element -->
</div>
<div class="single-content">
    <!-- when the div reaches here is adds the .fixed -->
    <div class="div2">
        <!-- I want the fixed element to end when it reaches this div -->
    </div>
</div>

有谁知道如何修理它？

Answer 1

关于这个主题有很多相关的问题，你会发现很多技巧，有些工作，有些不太好，但是当滚动到固定时，我总是使用这个 jquery 插件，创建来解决这个确切的问题。

演示：

http://jsfiddle.net/ZczEt/167/ http://jsfiddle.net/y3qV5/434/ http://jsfiddle.net/k2R3G/81/

插件和源码

https://github.com/bigspotteddog/ScrollToFixed

用法：

$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});

编辑：

如果您只是在寻找那条线，您应该使用它来计算.single-content顶部。

$(document).ready(function (){
    var auxtop = $('.single-content').offset().top 
    var margintop = parseFloat($('.single-content').css('margin-top').replace(/auto/, 0));
    var sidebartop = auxtop - margintop;
    $(window).scroll(function (event){
        var y = $(this).scrollTop();
        if ( y>= sidebartop ){
            $('#sharing-links').addClass('fixed');
        } else {
            $('#sharing-links').removeClass('fixed');
        }
    });
});