Question

我的断点是1000px并且在<header>中有一个类。但是我的文档既没有遵循任何一个条件。这是css的问题：

body:not(.logged-in) .header-xs {
   top: 0;
   padding-top: 11vh;
}

和js的问题是：

jQuery(window).on('load resize', function(){
    if(jQuery(window).width() > 1000 && !jQuery('header').hasClass('header-xs')){
         jQuery('body').css('margin-top', '0');
         jQuery('header').css({'margin-top': 'inherit', 'padding-top' : 'inherit'});
    }
})

我正在使用wordpress.Here当一个人登录后，logged-in课程被添加到<body>。但我没有登录就工作了。

js一旦添加'margin-top': 'inherit'; 'padding-top' : 'inherit'，即使我调整到移动宽度大小也会存在。

Answer 1

我正在尽力理解你的问题，所以试试这个，如果它接近你想要做的事情就让我。

你也有css，如果你试图用一个类来定位身体上方的标题，它将无法正常工作。您可能需要使用js。

jQuery(window).on('load resize', function() {
	console.log('resize - '+jQuery(window).width());
  if (jQuery(window).width() > 1000) {
		jQuery('header').removeClass('header-xs');
    jQuery('body').css('margin-top', '0');
    jQuery('header').css({
      'margin-top': 'inherit',
      'padding-top': 'inherit'
    });
  } else {
		jQuery('header').addClass('header-xs');
	}
})

body:not(.logged-in) .header-xs {
  top: 0;
  padding-top: 11vh;
	background: red;
}

body {
	background: green;
}


.header-xs {
	boder: 15px solid blue;
	height: 250px;
	width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header-xs">
</header>
<body>
</body>

js an css not works altought break point is set

1 个答案: