用于处理CSS自定义属性的JavaScript函数在$（window）.resize（）上不起作用）>

Question

我有一个带有:target页内锚点的固定标头，并且需要通过JavaScript或JQuery动态调整属性值，以便在调整窗口大小时直接在标头下保持相关:target的位置，同时适应上一部分的.container高度和调整大小时发生的.header_container高度的变化。

最简单的解决方案似乎是::before伪类的:target伪元素，然后利用CSS自定义属性动态修改样式属性。

在加载（或重新加载）页面时，使用以下功能正确放置:target或将第一个:target正确放置在$(window).resize()上都没有问题，但是对于其余目标无法执行相同的操作在$(window).resize()上。

小提琴

简化代码：

https://jsfiddle.net/chayanyc/s1k9xame/

响应式设计（简化）：

https://jsfiddle.net/chayanyc/axe69o8h/

代码段

CSS：

.header_container {height: 98px; margin: 0; padding: 0; position: fixed; top: 0; display: block; z-index: 100;}
.main {margin-top: 98px; width: 100%;}
:target::before {height: var(--target_position1); margin-top: var(--target_position2); content: ""; display: block; visibility: hidden;}
JavaScript：

var headerHeight;

function setTarget() {
    headerHeight = document.getElementById('header').offsetHeight;
    headerHeight1 = headerHeight + "px";
    headerHeight2 = -headerHeight + "px";        
    document.documentElement.style.setProperty('--target_position1', headerHeight1);
    document.documentElement.style.setProperty('--target_position2', headerHeight2);
}

$(window).resize(function () {
    setTarget();
});

$(document).ready(function () {
    setTarget();
});

我有一个带：target页内锚点的固定标头，需要通过JavaScript或JQuery动态调整属性值，以便直接在...之下保持：target的相关位置。]

Answer 1

调整大小正在触发，偏移高度未更改。一遍又一遍设置相同的值不会产生任何变化。您可以检查一下：

see the value change

Answer 2

对我来说，价值观已经改变（通过这种方式）CSS