当前位置: 首页 > 面试题库 >

添加/删除基于垂直滚动的jQuery类?

壤驷睿
2023-03-14
问题内容

因此,基本上,我想在用户向下滚动并添加另一个类以更改外观后从“标题”中删除该类。

试图找出最简单的方法,但我无法使其正常工作。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

我确定我在做一些非常基本的错误。


问题答案:

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

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

另外,通过删除clearHeader该类,可以position:fixed;从元素中删除,并可以通过$(".clearHeader")选择器重新选择它。我建议不要删除该类,并在其顶部添加一个新的CSS类以用于样式设置。

如果要在用户向上滚动时“重置”类添加,请执行以下操作:

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

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

编辑: 这是标题选择器的版本缓存-更好的性能,因为它不会在每次滚动时查询DOM,并且可以安全地删除/添加任何类到标题元素而不会丢失引用:

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});


 类似资料:
  • 我想添加一种在中滚动菜单项的方法,就像在中滚动项列表一样。 假设我有10个菜单项。我希望一次只显示5个菜单项,我将使用底部或顶部的垂直滚动按钮来显示未列出的菜单项,并隐藏刚才看到的菜单项。 有可能吗?我使用的是JIDE软件的,点击它时会显示。我试图保持放置的命令栏的外观,因此除非真的有必要,否则我不想用替换它。

  • 问题内容: 我想增加一种滚动菜单项的方法,就像滚动滚动菜单项的列表一样。 假设我有10个菜单项。我想一次只显示5个菜单项,并且我会使用底部或顶部的垂直滚动按钮来显示未列出的菜单项并隐藏我刚刚看到的菜单项。 可能吗?我正在使用JIDE软件的,单击时会显示。我试图保持放置命令栏的外观,因此除非确实需要,否则我不想将其替换为。 问题答案: 可能是这个 http://www.javabeginner.co

  • 问题内容: 我想删除图像中显示的行。我该如何删除? 问题答案: jqGrid在主网格表上构建了一些其他div。外部div具有class 。因此,如果需要删除整个网格上存在的左右边界,则可以使用以下CSS: 如果需要删除所有网格边框,可以使用 如果您还需要删除网格中单元格之间的垂直边框,则可以使用 要删除行之间的水平边框,可以使用 要删除列标题之间的垂直边框,可以使用 或替代(不使用)

  • 本文向大家介绍基于JavaScript实现动态添加删除表格的行,包括了基于JavaScript实现动态添加删除表格的行的使用技巧和注意事项,需要的朋友参考一下 又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp 2.js 以上所述是小编给大家分享的JavaScript实现动

  • 这是一个实现了垂直的内容切合的 jQuery 插件。 在线演示: http://www.5ihtml.com/items/demo/559/jQuerySlideshow

  • 我是Angular的新手,在一个项目中,第二个div应该开始滚动一个,第一个div到达它的底部。我已经设法使用普通Javascript实现了它,但不确定如何在Angular中实现同样的功能。如有任何帮助,我们将不胜感激。在这里拉小提琴 样式 HTML 脚本