JavaScript函数，用于操作不在$（window.resize（）上工作的CSS自定义属性

我在页面锚定中有一个固定的标题：target，需要通过JavaScript或JQuery动态调整属性值，以便在调整窗口大小时保持相关：target在标题下的位置，同时适应上一节的.container height和.header\u container height随大小调整而发生的变化

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

在加载或重新加载页面时，我可以使用下面的函数正确定位：target，或者在$window.resize上正确定位第一个：target，但是它无法对$window.resize上的其余目标执行相同的操作

小提琴

简化代码：

响应性设计简化：

代码片段

CSS:

JavaScript:

---

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

我将徽标用于输出：

$('.logo').text(headerHeight + ' -' + i++);

您想向下滚动到目标选择的一个div，而不让它与导航重叠吗

。。然后扩展区域。 添加正边距顶部和负填充顶部

---

。。。。为了补偿任何导航大小的更改，请使用媒体查询来更改css变量。

此问题没有完整的解决方案， 因为您希望目标元素在文档调整大小时保持不变，但如果用户在其页面上滚动，则不可能知道在显示的第一行的同一第一个单词上保持不变的位置。 所以，在这里，当用户调整文档大小时，我只是在顶部的同一个目标上进行替换，即使他之前做过滚动

无需此CSS部件即可将其删除

:target::before {margin: 0; content: ""; dis.....

并将jQuery更改为：

$(document).ready(function () {

  // global info for menu -> target elememt
  var InfoTarget = { ID: null, tempo:300 }

  $('a').click(function(evt){
    InfoTarget.ID = $(this).attr('href') // possible target elm

    // check if InfoTarget.ID exist on page
    let nbElements = 0
    try        { nbElements = $(InfoTarget.ID).length  }
    catch(err) { nbElements = 0 }

    if ( nbElements != 1 ) {
      InfoTarget.ID = null  // not target element found
    }
    else {
      evt.preventDefault()   // disable auto scroll to target element  

      $('html').animate({
          scrollTop: ($(InfoTarget.ID).offset().top - $('#header').outerHeight(true))
      }, InfoTarget.tempo  );
    }
  });

  $(window).resize(function (){
    if (InfoTarget.ID) {  // if InfoTarget.ID exist <=> InfoTarget.ID != null
      $('html').animate({
        scrollTop: ($(InfoTarget.ID).offset().top - $('#header').outerHeight(true))
      }, InfoTarget.tempo);
    }
  });

});

在此版本中，目标元素添加了一个类TargetMark，允许在调整窗口大小时找到它

结束部分

$(document).ready(function () {
  //...
  // --------------------------->  no call to scrollTop();
  //...
});

$(window).resize(function () {
  //...
  scrollTop2();
  //...
});

关于切换菜单冲突：

function toggleMenu() {
  $('.navbar-toggle').on('click', function () {
    if ($("#js-menu").is(".expand")) {
      $("#js-menu").toggleClass("expand");
      $("#submenu").removeClass("active_sub").addClass("inactive_sub");
    } else {
      $("#js-menu").toggleClass("expand");
      $("#submenu").removeClass("inactive_sub").addClass("active_sub");
    }
    resetTarget();
    setTimeout( scrollTop2, 220 )  // scroll to target after browser auto scrolling conflit
  });
}

我花了很多时间在你的问题上，我研究了不同的方法和不同的自动导航系统，这些都是为了得到你想要的结果而奋斗的必要条件。我得出的结论是，问题首先来自页面的体系结构。 菜单头覆盖了页面主界面这一事实是一个主要缺陷，它阻止了为您的问题编写有效的JS代码。 对锚的散列的调用会触发页面的一个或多个滚动，页面的大小调整也需要滚动计算，因为通过改变屏幕上的大小，它也会改变页面的大小。页面将屏幕的大小减少一半会使页面大小加倍，改变字体大小也是一样的，它也会改变页面的大小。 每当页面大小改变时，浏览器必须重新计算很多内容，其中一些机制可能会触发一个或多个滚动。 您在这里要求的是根据一个元素重新计算页面定位，我们无法确定该元素是否已完全建立，因为此过程与浏览器的其他过程并行执行，这些过程可能会更改有用的值。 另外，一些浏览器进程也可以滚动页面，这是最后一次完成！ 因此，菜单和页面之间存在重叠这一事实增加了复杂性，使解决方案的可能性变得不可能。

---

改变你的布局，你的问题的三分之四将得到解决

该功能旨在在$window.resize上直接将：目标重新定位在.header_container div下，以考虑与响应设计相关的大量更改，特别是高度更改：1.header_container和2.上一节的.container。为了达到这个目的，你建议如何修改函数？@ChayaCooper在我的回答中添加了更多内容。有趣的方向，但遗憾的是，这仍然会导致同样的问题，即在$window.resize上无法正确地重新定位第二个目标。我遵循了您的建议，并在我的问题中添加了更多内容，希望能够更好地阐明意图和编码问题。headerHeight=document.getElementById'header'。offsetHeight；永不改变……你能澄清你所说的“永不改变”是什么意思吗？当指示它这样做时，它实际上会改变，即在第二小提琴中，当它不打算改变时，这正是我需要它仍然重置目标位置的地方，以便在上一节的高度因窗口大小的改变而改变时保持在标题的正下方。我只是用我的新解决方案更改了我的答案..更改css自定义值​​在伪元素上对父元素没有动态影响。你必须放弃这个想法，这个想法永远都不会成为这个问题的解决方案！但是自从

---

它比我当前的函数要高级一点，你介意解释一下你的代码和你使用的属性吗，这样我就可以自定义它，将它应用到我的完整和更复杂的代码中？这似乎正是我所需要的，但有一个小问题——在其他菜单调整大小/导航事件时正确触发该功能，特别是当菜单折叠/展开或从另一页导航到定位点时。下面是我如何修改代码的：jsfiddle.net/chayanyc/do0q3hfc。关于如何正确应用它，有什么建议吗？肯定差不多了，代码调整对切换菜单非常有效。只有几个小问题：1触发arrowClick时，正在删除锚散列。我如何正确地将其集成到那里？2当触发'hashchange'上的$window.on时，在何处合并resetTarget？在scrollTop2之前调用它在$window.resize中非常有效，但将其添加到初始函数似乎不起作用。3当从另一个页面导航到锚点时，它与resetTarget函数的作用稍有不同，但这可能与2有关

// scroll to target upon window.location.hash 
$(window).on('hashchange', function() {
  $('.TargetMark').removeClass('TargetMark')
  $(window.location.hash).addClass('TargetMark')

  setTimeout( scrollTop2, 220 )  // scroll to target after browser auto scrolling conflit
})

function scrollTop2() {
  if ($('.TargetMark').length===1) { // if target exist
    $('html').animate({
        scrollTop: ($('.TargetMark').offset().top - $('#header').outerHeight(true))
    }, 100);
  }
}

$(document).ready(function () {
  //...
  // --------------------------->  no call to scrollTop();
  //...
});

$(window).resize(function () {
  //...
  scrollTop2();
  //...
});

function toggleMenu() {
  $('.navbar-toggle').on('click', function () {
    if ($("#js-menu").is(".expand")) {
      $("#js-menu").toggleClass("expand");
      $("#submenu").removeClass("active_sub").addClass("inactive_sub");
    } else {
      $("#js-menu").toggleClass("expand");
      $("#submenu").removeClass("inactive_sub").addClass("active_sub");
    }
    resetTarget();
    setTimeout( scrollTop2, 220 )  // scroll to target after browser auto scrolling conflit
  });
}