jquery - 根据滚动位置更改CSS

时间:2018-04-29 20:32:45

标签: jquery scroll

我正在设计和开发类似于duolingo的模板 现在我要求你帮助我改变h1标签的外观并设置顶部栏的样式 我为这个主题编写的代码如下,但它不是一个配方,并且不适用于示例网站。

setInterval(function() {
                var height = $(window).scrollTop();
                if (height >= 0 && height < 120) {
                    $('.long-header-label').css('font-size', "34px");
                    $('.btn-start-index').css({
                        'visibility': 'visible',
                        'opacity': '1',
                        'display': 'inline-block'
                    });
                    $('.btn-start-header').css("display","none");
                    $('.cta-container').css({
                        'position':'relative',
                        'display':'block'
                    });
                }
                if (height > 119 && height < 200) {
                    $('.long-header-label').css('font-size', "29.5px");
                    $('.btn-start-index').css({
                        'visibility': 'hidden',
                        'opacity': '0',
                        'display': 'none'
                    });
                    $('.cta-container').css({
                        'position':'relative',
                        'display':'block'
                    });
                    $('.btn-start-header').css({
                    "margin-left": " 10px",
                    "display": " inherit"
                    });

                }
                if (height > 199 && height < 265) {
                    $('.long-header-label').css('font-size', "22px");
                    $('.btn-start-index').css({
                        'visibility': 'hidden',
                        'opacity': '0',
                        'display': 'none'
                    });
                    $('.cta-container').css({
                        'position':'fixed',
                        'display':'none'
                    });
                    $('.btn-start-header').css({
                        "margin-left": " 10px",
                        "display": " inherit"
                    });
                }


        }, 100);

0 个答案:

没有答案