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

时间:2015-10-23 15:25:30

标签: javascript jquery css css3

我已经尝试了下面的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();
  });
  });

PS 有没有办法可以通过简单地使用div <div class="stop"></div>来合并一个停止点,一旦固定/滚动元素点击,它就无法继续超过该点?

1 个答案:

答案 0 :(得分:1)

function checkOffset() {....}

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

以这种方式更好地使用功能。