我正在运行一个wordpress主题,它有一个粘性标题。我已经构建了一个subnav,它显示在标题的正下方。每当我使用这个subnav时,标题不应该保持粘性,而是subnav应该是粘性的(已经用简单的javascript addClass制作)。我只对如何以最佳方式关闭标题的粘性感兴趣。
(1)使用CSS: 一种方法是使用css并覆盖类,这使得标头变得粘稠。这已经有效,我刚刚修改了固定的位置并禁用了占位符,当位置设置为fixed并且标题从流中取出时,这避免了内容中的间隙。基于我想在许多页面上使用subnav的情况(约70%),我将不得不编写一个大的css规则,用于通过其ID来定位相关页面。这导致我认为javascript在资源方面可能更好。
(2)使用Javascript: 我写了一小段javascript,当页面上出现subnav的ID时,可以轻松删除整个css类:
if(document.getElementById('subnavfullwidth')){
jQuery( '.header-sticky-height' ).toggleClass( 'header-sticky-height', 'false' );
jQuery( '.header-wrapper' ).toggleClass( 'header-is-sticky', 'false' );
jQuery( '.header' ).toggleClass( '.header-sticky-shadow', 'false' );
}
标题简单:javascript会更好还是网站性能的一大css规则?有没有办法优化我的JavaScript或者它还好吗?
亲切的问候!
答案 0 :(得分:0)
我更倾向于将一个类添加到'.header'(假设这是相关区域的根元素)名为sticky,并将类标题更改为标题的id。
你编写它的方式,你可以通过向'.header'添加一个id来获得一点性能,然后将方法链接在一起以限制必须搜索的元素数量。
$('#header')
.toggleClass('header-sticky-shadow', false)
.find('.header-wrapper')
.toggleClass('header-is-sticky', false)
.end()
.find('.header-sticky-height', false)
.toggleClass('header-sticky-height', false);