Question

我有一个容器在特定点之后粘到顶部。但对我来说还不够。我在页面中有一个页脚，当屏幕较小时，粘贴部分隐藏在页脚下方。我希望它停止在页脚顶部向下移动（停止固定为0，但固定为减号，这是它们之间的减法）。这是我的代码。我应该为这个目标添加什么？什么时候打电话？在调整大小？准备好了？等

非常感谢

    window.onscroll = function (event) {
        fixDiv();
    };
    function fixDiv() {
        if (getBrowserHeight().width > 1284) {
            var $div = $("#Container");
            if ($(window).scrollTop() > $div.data("top")) {
                $('#Container').css({ 'position': 'fixed', 'top': '0' });
            }
            else {
                $('#Container').css({ 'position': 'static', 'top': 'auto' });
            }
        }
    }

    $(document).ready(function () {

        $("#Container").data("top", $("#Container").offset().top); 

    });

Answer 1

这应该让你去。如果不清楚，请不要在寻求帮助。

$(document).ready(function() {

  $(window).scroll(function() {
    var footerEl = $('footer').offset().top;
    var footerTop = (footerEl - $(window).scrollTop());
    var containerHeight = $('.container').height();
    var footerHeight = $('footer').height();
    console.log('footer', footerTop);
    $('.container').removeClass('sticky');

    if (footerTop <= containerHeight) {
      $('.container').addClass('sticky');
      $('.container').css('bottom', footerHeight);
    }

  });

});

body {
  height: 1000px;
  position: relative;
}
.container {
  width: 100%;
  min-height: 300px;
  position: fixed;
  top: 0;
  background: red;
}
.sticky {
  position: absolute;
  top: auto;
}
footer {
  width: 100%;
  min-height: 500px;
  position: absolute;
  bottom: 0;
  background: black;
}

<html>

<body>
  <div class="container"></div>
  <footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

</html>

Answer 2

我尝试尽可能少地对您的代码进行更改，但是有更好的方法来解决这个问题。使用类，比如在@mhx中回答。下面是完整的JavaScript（抱歉，我必须删除您未定义的getBrowserHeight()）：

window.onscroll = function (event) {
    fixDiv();
};
function fixDiv() {
    var $div = $("#Container");
    var $footer = $("footer");

    if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
        $('#Container').css({ 'position': 'fixed', 'top': '0' });
    } 
    else if ($footer.data("top") > $footer.data("top") - $div.height()) {
        $('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
    }
    else {
        $('#Container').css({ 'position': 'static', 'top': 'auto' });
    }
}

$(document).ready(function () {
    $("#Container").data("top", $("#Container").offset().top); 
    $("footer").data("top", $("footer").offset().top); 
});

除了在页脚中添加top数据属性并在$footer的开头定义fixDiv()之外，我已将此添加到您的初始if语句中，以确保滚动位置不会超出页脚顶部减去div的高度。

&& $(window).scrollTop() < $footer.data("top") - $div.height()

...我已添加其他if语句，以防它超出页脚顶部减去div的高度

else if ($footer.data("top") > $footer.data("top") - $div.height()) {
    $('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}

这是一个小提琴：http://jsfiddle.net/ds5tptay/

坚持特定范围内的部分

2 个答案: