Question

我正在建立一个网站，我有一个名为＆＃34;菜单栏＆＃34;的div类。它只是一个横跨屏幕顶部几百个像素的条形图，带有一些背景颜色。我有3个单独的文件中的HTML，CSS和JQuery。

当用户向下滚动页面时，＆＃34;菜单栏的顶部＆＃34;到达屏幕的顶部，我希望它坚持到那里，直到用户一直滚动到其原始位置。现在，＆＃34;菜单栏＆＃34;设置为绝对CSS位置。我想我可以使用JQuery方法.removeClass（）和.addClass（）将菜单栏的位置更改为＆＃34; fixed＆＃34;。这是我的代码。

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

Answer 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) );

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

1 个答案: