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

Question

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

当用户向下滚动页面并且“菜单栏”的顶部到达屏幕顶部时，我希望它停留在该位置，直到用户一直滚动回到其原始位置为止。 现在，“菜单栏”设置为绝对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');
                }    
        });
    });

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 个解决方案

解决方案1
1 已采纳 2017-04-14 10:23:18

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-14 10:23:18

解决方案1
1 已采纳 2017-04-14 10:23:18