当浏览器窗口的高度较小时，停止固定元素滚动到页脚 [英] stop fixed element from scrolling into the footer when the browser window is a smaller height

问题描述

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

I have tried the below jQuery / logic but it's not working... The problem is I have a fixed nav, and that's fine. But when the user is on a smaller height resolution / screen ie. a laptop the fixed scrolling nav, when scrolled to the bottom of the page -- overlaps the footer element. Which looks really bad.

以下是不工作..似乎只是，恢复我的固定元素立即在页面加载位置绝对。

The below is not working.. and seems to only, revert my fixed element to position absolute immediately on page load.

 $(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> ，一旦固定/滚动元素命中， / p>

P.S. Could there be a way I could incorporate a stopping point by simple using a div <div class="stop"></div> and once the fixed / scrolling element hits then it can't continue past that point?

推荐答案

function checkOffset() {....}

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

这样最好使用函数。

这篇关于当浏览器窗口的高度较小时，停止固定元素滚动到页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！