Javascript固定位置导航根据窗口高度/滚动量间歇工作 [英] Javascript fixed position nav works intermittently depending on window height/amount of scroll

问题描述

我在导航栏上方有一个标题图像，标题图像由两个图像组成，前景中的一个在左下角，并且与背景滚动，直到它通过一些方式离开屏幕顶部，然后它溢出到导航，最后向上滚动，直到导航修复在顶部。

小提琴

更改输出窗口的高度，以查看下面描述的问题。

  $（function（）{
 var nav_offset_top = $（'＃nav'）。offset（）。top; 
 var nav = function（）{
 var scroll_top = $（window）.scrollTop（）; 
 var width = $（window）.width（）; 
 if（scroll_top< 195）{ 
 $（'＃fg-img'）。css（{'position'：'absolute'，'top'：0}）; 
 $（'＃nav'）。css '：'relative'}）; 
} 
 else if（scroll_top< 265）{
 $（'＃fg-img'）。css（{'position'：'fixed' ，'top'：-195}）; 
 $（'＃nav'）。css（{'position'：'relative'}）; 
} 
 else if（scroll_top< nav_offset_top）{
 $（'＃fg-img'）。css（{'position'：'fixed'，'top'：70-scroll_top }）; 
 $（'＃nav'）。css（{'position'：'relative'}）; 
} 
 else {
 $（'＃nav'）。css（{'position'：'fixed'，'top'：0}）; 
 $（'＃fg-img'）。css（{'position'：'fixed'，'top'：-247}）; 
} 
 
}; 
 nav（）; 
 $（window）.scroll（function（）{
 nav（）; 
}）; 
 
}）; 
  

这正好与我打算如果Chrome窗口说，我的屏幕的垂直高度的一半 - 所以我最初认为它是完美的工作。

然后我意识到，这是不工作，如果有'没有多少'

这是 =http://stackoverflow.com/questions/13905700/sticky-nav-wont-scroll-on-short-pages?rq=1>与发布在这里相同的问题 - 但那是没有解决，而且OP未通过固定导航解决...

可能也是这里问的问题，但也放弃了没有回答。

HTML看起来像：

 < div id =header> 
< div class =content> 
< img id =fg-imgsrc =img / fg.png/> 
< img class =bannerwidth =960pxheight =300pxsrc =img / bg.jpg/> 
< / div> 
< / div> 
< div id =nav> 
< / div> 
  

解决方案

最后，我找到了。 b
$ b

问题是，我正在让内容的主体在导航之后快速跳转。

我实际上没有注意到这个行为，因为我只是使用< br /> 的填充一些虚拟内容。

因此，当窗口大小足够大以允许向下滚动以满足 #nav div，并稍微超过，但不是这样大到有内容超过它跳到 #nav 后面的数量，浏览器不会让它滚动超出页面的结尾，因此跳回。

我的修复是在某些外部＃sticky-nav中隐藏 #nav {min-height：/ *贴在顶端的一切的高度* /} 。

jQuery是相同的，我们仍然检测到并粘贴 #nav ，但现在内容不会跳过它，所以它不会闪烁，当有一个量的卷轴在0和导航高度之间。

这里是小提琴。

I have a header image above a navigation bar, the header image is comprised of two images, the one in the foreground is in the lower-left, and scrolls with the background until it's passed some way off the top of the screen, then it overflows into the navigation, and finally scrolls up with it until the navigation fixes at the top.

Fiddle

Change the height of the output window to see the problem I describe below.

$(function () {
    var nav_offset_top = $('#nav').offset().top;
    var nav = function () {
        var scroll_top = $(window).scrollTop();
        var width = $(window).width();
        if (scroll_top < 195) {
            $('#fg-img').css({ 'position': 'absolute', 'top': 0 });
            $('#nav').css({ 'position': 'relative' });
        }
        else if (scroll_top < 265) {
            $('#fg-img').css({ 'position': 'fixed', 'top': -195});
            $('#nav').css({ 'position': 'relative' });
        }
        else if (scroll_top < nav_offset_top) {
            $('#fg-img').css({ 'position': 'fixed', 'top': 70-scroll_top });
            $('#nav').css({ 'position': 'relative' });
        }
        else {
            $('#nav').css({ 'position': 'fixed', 'top': 0 });
            $('#fg-img').css({ 'position': 'fixed', 'top': -247  });
        }

    };
    nav();
    $(window).scroll(function () {
        nav();
    });

});

This works exactly as I intend if the Chrome window is say, half the vertical height of my screen - so I initially assumed it was working perfectly.

I then realised however that is does not work if there is 'not much' to scroll down to - when scroll_top == nav_offset_top the whole thing 'jumps' back up.

This is the same issue as posted here - but that went unsolved, and the OP 'resolved' it by not using a fixed navigation...

Probably also the same issue as asked about here, but that too was abandoned without answer.

HTML looks like:

<div id="header">
    <div class="content">
        <img id="fg-img" src="img/fg.png" />
        <img class="banner" width="960px" height="300px" src="img/bg.jpg" />
    </div>
</div>
<div id="nav">
</div>

解决方案

Finally, I found it.

The issue was that I was letting the main body of content 'jump' up behind the navigation is soon as it stuck.

I actually didn't notice this behaviour at first - since I was just using a load of <br />s to fill some dummy content.

So, when the window size was big enough to allow scrolling down to meet the #nav div, and slightly beyond, but not so large as to have content beyond the amount by which it jumps up behind #nav, the browser would not let it scroll beyond the end of the page, and thus 'jumps' back up.

My fix is to cloak #nav in some outer #sticky-nav{ min-height: /*height of everything that sticks to top */ }.

Simple, but it works. jQuery is the same, we're still detecting off and sticking #nav, but now the content won't jump behind it, so it won't flicker when there's an amount of scroll somewhere between 0 and nav height.

Here's the fiddle.

这篇关于Javascript固定位置导航根据窗口高度/滚动量间歇工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！