为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕勒3428872 2019-11-08 14:32:20
因此,基本上,我想在用户向下滚动并添加另一个类以更改外观后从“标题”中删除该类。试图找出最简单的方法,但我无法使其正常工作。$(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>我确定我在做一些非常基本的错误。
查看完整描述

3 回答

?
守候你守候我

TA贡献1802条经验 获得超10个赞

$(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');

        }

    });

});


查看完整回答
反对 回复 2019-11-08
?
DIEA

TA贡献1820条经验 获得超2个赞

它是我的代码


jQuery(document).ready(function(e) {

    var WindowHeight = jQuery(window).height();


    var load_element = 0;


    //position of element

    var scroll_position = jQuery('.product-bottom').offset().top;


    var screen_height = jQuery(window).height();

    var activation_offset = 0;

    var max_scroll_height = jQuery('body').height() + screen_height;


    var scroll_activation_point = scroll_position - (screen_height * activation_offset);


    jQuery(window).on('scroll', function(e) {


        var y_scroll_pos = window.pageYOffset;

        var element_in_view = y_scroll_pos > scroll_activation_point;

        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;


        if (element_in_view || has_reached_bottom_of_page) {

            jQuery('.product-bottom').addClass("change");

        } else {

            jQuery('.product-bottom').removeClass("change");

        }


    });


});


查看完整回答
反对 回复 2019-11-08
  • 3 回答
  • 0 关注
  • 683 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信