当浏览器窗口的高度较小时,停止固定元素滚动到页脚
我试过下面的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();
});
}
这样最好使用函数。