Question

这是我的代码的链接： https://jsfiddle.net/81scw7eg/

我的JavaScript：

$(function() {
/* Stick the #bottomMenuBarContent to the top of the window */
var nav = $('#bottomMenuBarContent');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css( {
            position: 'fixed',
            top: 0,
            left: nav.offset().left,
            width: nav.width()
        });
        isFixed = true;
    } else if (!shouldBeFixed && isFixed) {
        nav.css({
            position: 'static'
        });
        isFixed = false;
        }
    });
});

/* Changes Navigation Bar Color on Scroll */
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
    scroll_pos = $(this).scrollTop();

    if (scroll_pos > 50) {
        $("#bottomMenuBarContent").css('background-color', '#2a2a2a');
    } else {
        $("#bottomMenuBarContent").css('background-color', 'grey');
    }
});
});

我不知道为什么，但我的导航栏没有调整到我的屏幕。尝试打开我的网站并将其调整为较小的尺寸。现在向下滚动网站，以便导航栏更改颜色，然后最大化浏览器屏幕。由于某种原因，它不会随之移动。有什么想法吗？

Example Screenshot

Answer 1

在您的示例中，您将元素的宽度设置为原始宽度（在这种情况下，由它的内容构成，当你从位置切换到静止位置时，它不会100％进入屏幕：固定）

只需替换

行

width: nav.width()

与

right: 0

导航栏不会调整大小到浏览器屏幕

1 个答案: