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

标签 javascript jquery html

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

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

相关 HTML:

<html>
<body>
    <div id="page-container">
       <div id="header">
          <div class="menu-bar"></div>
       </div>
    </div>
</body>
</html>

相关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');
                }    
        });
    });

最佳答案

您的 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) );

关于javascript - 使用 Jquery 方法将 div 的 CSS 位置从绝对位置更改为固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43409584/

相关文章:

html - 表的最后一 block 填充行的其余部分?

javascript - 从一个对象悬停到另一个对象,第二个 DOM 对象不会立即消失

javascript - 如何使用 jquery 仅删除 #Chat 中的选定消息?

javascript - 关闭功能无法正常工作

javascript - 单击元素时避免 flexbox 使用 CSS 扩展

html - 将 Angular 2 绑定(bind)与 Jade 一起使用的奇怪问题

javascript - ES6 是否支持像 { a as a1 } = obj 这样的扩展语法,或者是否有关于它的 RFC?

javascript - 我们如何移动 Electron 应用程序以在第二/外部屏幕上显示?

javascript - jQuery 删除 div onclick

javascript - 使用 qtip 插件按钮进入工具提示不起作用