Javascript固定位置导航间歇性地工作，具体取决于窗口高度/滚动量

Javascript fixed position nav works intermittently depending on window height/amount of scroll

本文关键字：取决于 窗口 高度 滚动 工作 位置 定位 导航 Javascript      更新时间：2023-09-26

我在导航栏上方有一个标题图像，标题图像由两个图像组成，前景中的图像位于左下角，并随着背景滚动，直到它从屏幕顶部经过一段距离，然后它溢出到导航中，最后向上滚动，直到导航固定在顶部。

小提琴

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

$(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();
    });
});

如果Chrome窗口是屏幕垂直高度的一半，这完全符合我的预期 - 所以我最初认为它工作得很好。

然后我意识到，如果"没有太多"可以向下滚动，那是行不通的 - 当scroll_top == nav_offset_top整个事情"跳"回去时。

这与此处发布的问题相同 - 但这尚未解决，OP 通过不使用固定导航来"解决"它......

可能也是这里问到的同一个问题，但那也被放弃了，没有答案。

HTML 看起来像：

<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>

终于，我找到了。

问题是我让内容的主体在导航卡住后立即"跳"起来。

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

因此，当窗口大小足够大以允许向下滚动以满足#navdiv，并且略微超出，但不要大到内容超过它在#nav后面跳跃的数量时，浏览器不会让它滚动到页面末尾，从而"跳"回去。

我的解决方法是将#nav隐藏在一些外#sticky-nav{ min-height: /*height of everything that sticks to top */ }中。

jQuery是一样的，我们仍然在检测关闭并坚持#nav，但现在内容不会跳到它后面，所以当滚动量在0和导航高度之间时，它不会闪烁。

这是小提琴。

else{
            $('#fg-img').css({ 'position': 'fixed', 'top': -247});
        }

更改

else if (scroll_top < ('you condition')  ){
            $('#fg-img').css({ 'position': 'fixed', 'top': -247});
        }

解决方案

试图尽可能干燥元素以获得干净的解决方案。请注意，如果从图像中删除块显示，则必须设置行高，否则最终可能会在元素之间留出空格。

.HTML

<div id="header">
  <img src="http://placehold.it/960x300" />
</div>
<div id="nav">
  <img src="http://placehold.it/960x80/000000" />
</div>
<ol>
  <li>item</li>
  <li>item</li>
  ...
</ol>

.CSS

body {margin: 0}
img {display: block}
ol {margin: 10px; padding: 0 0 0 20px}

.JS

var $nav = $('#nav'), 
    $header = $('#header'),
    $window = $(window),
    height = $nav.height(),
    top = $nav.offset().top,
nav = function () {  
  var scroll = $window.scrollTop(); 
  if (top < scroll) {
    $nav.css({ 'position': 'fixed', 'top': 0});        
    $header.css({ 'margin-bottom': height + 10 });
    //10 is the bottom margin of the next element
  } else {
    $nav.css({ 'position': 'relative' });
    $header.css({ 'margin-bottom': 0 });
  }
};  
nav();
$window.scroll(nav);
相关文章：