当浏览器窗口的高度较小时，阻止固定元素滚动到页脚

Question

我已经尝试了下面的 jQuery / 逻辑，但它不起作用......问题是我有一个固定的导航，这很好。但是当用户在较小的高度分辨率/屏幕上时，即。笔记本电脑的固定滚动导航，当滚动到页面底部时 - 与页脚元素重叠。这看起来真的很糟糕。

以下内容不起作用..似乎只是在页面加载时立即将我的固定元素恢复为绝对位置。

 $(document).ready(function() {
    function checkOffset() {
     if($('.navSmall').offset().top + $('.navSmall').height() 
                                       >= $('#footer-wrapper-4o').offset().top - 10)
    $('.navSmall').css('position', 'absolute');
     if($(document).scrollTop() + window.innerHeight < $('#footer-wrapper-4o').offset().top)
    $('.navSmall').css('position', 'fixed'); // restore when you scroll up
    $('.navSmall').text($(document).scrollTop() + window.innerHeight);
  }
  $(document).scroll(function() {
      checkOffset();
  });
  });

P.S. 有没有一种方法可以通过简单地使用 div <div class="stop"></div> 来合并停止点，一旦固定/滚动元素命中，它就无法继续超过该点？ p>

Answer 1

function checkOffset() {....}

$(window).load(function() {
    $(window).scroll(function() {
      checkOffset();
  });
}

这样使用函数比较好。