使用 Jquery 方法将 div 的 CSS 位置从绝对更改为固定答案

【问题标题】：Using Jquery Methods to change a div's CSS position from absolute to fixed使用 Jquery 方法将 div 的 CSS 位置从绝对更改为固定
【发布时间】：2017-04-15 03:41:06
【问题描述】：

我正在建立一个网站，其中有一个名为“菜单栏”的 div 类。它只是一个在屏幕顶部下方数百像素处延伸的条形图，带有一些背景颜色。我的 HTML、CSS 和 JQuery 在 3 个单独的文件中。

当用户向下滚动页面并且“菜单栏”的顶部到达屏幕顶部时，我希望它一直停留在那里，直到用户一直滚动回其原始位置。现在，“菜单栏”设置为绝对 CSS 位置。我想我可以使用 JQuery 方法 .removeClass() 和 .addClass() 将菜单栏的位置更改为“固定”。下面是我的代码。

相关CSS：

   .menu-bar
   {
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        top: 225px;
        background-color: #11342D;
        z-index: -1;
   }

   .menu-fixed {
        position: fixed;
        width: 100%;
        height: 50px;
        left: 0;
        top: 0;
        background-color: #11342D;
        z-index: -1;
   }

Jquery：

$(document).ready(function(){

    var offset = $('menu-bar').offset();

        $(window).scroll(function){
            var scroll = $(window).scrollTop();

            if offset.top < scroll) $('menu-bar').removeClass('menu-bar').addClass('menu-fixed');
            else $('menu-bar').removeClass('menu-fixed').addClass('menu-bar');
        });
    });

代码无法正常工作，我已经排查了好几天。我究竟做错了什么？这是一个网站的链接，该网站的行为几乎与我正在寻找的那种行为完全相同：[https://monocle.com/][1]

谢谢。

更新：下面是任何需要复制此行为的人的工作 jQuery 代码。

$(document).ready(function(){

    var offset = $('.menu-bar').offset();

        $(window).scroll(function(){
            var scroll = $(window).scrollTop();

            if (offset.top < scroll) 
                {
                     $('.menu-bar').removeClass('menu-bar').addClass('menu-fixed');
                }   
            else 
                {
                     $('.menu-fixed').removeClass('menu-fixed').addClass('menu-bar');
                }    
        });
    });

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你的if 条件语法不正确，menu-bar 也是一个类，所以使用.menu-bar

if (offset.top < scroll)  //start ( bracket was missing
{
   $('.menu-bar').removeClass('menu-bar').addClass('menu-fixed');
}
else 
{
   $('.menu-bar').removeClass('menu-fixed').addClass('menu-bar');
}

你也可以

$('.menu-bar').toggleClass('menu-fixed', (offset.top < scroll) );
$('.menu-fixed').toggleClass('menu-bar', !(offset.top < scroll) );

【讨论】：

非常感谢。虽然我知道 HTML 和 CSS，但我昨天才通过 jquery.com 上的 API 文档开始学习 jquery。我在第二个“function（）”上缺少了一个额外的括号“（”。你介意向我解释一下你写最后一点的第二种方式吗？你是说可以添加它而不是 If Else 语句吗？我是假设 "," 相当于说 WHEN 的计算结果为 TRUE，而 "!" 相当于说 WHEN 的计算结果为 FALSE？