JavaScript function 操纵 CSS 自定义属性不适用于 $(window).resize()

Question

I have a fixed header with :target in-page anchors, and need to adjust the property values dynamically via JavaScript or JQuery so as to maintain the relevant :target 's position directly under the header when the window is resized, while adapting to the changes in both the previous section's.container height and the .header_container height that occur with resizing.

The simplest solution seems to be a ::before pseudo-element for the :target pseudo-class, and to then utilize CSS custom properties to dynamically modify the style properties.

I have no trouble correctly positioning the :target with the below function when the page is loaded (or reloaded), or correctly position the first :target on $(window).resize() , however it's failing to do the same for the remaining targets on $(window).resize() .

Fiddles

Simplified Code: https://jsfiddle.net/chayanyc/g6p3549s/

Responsive Design (Simplified): https://jsfiddle.net/chayanyc/wuk92dns/

Code Snippets

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";       
    document.documentElement.style.setProperty('--target_position1', headerHeight1);
    document.documentElement.style.setProperty('--target_position2', '-' + headerHeight1);
}

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

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

Answer 1

There is no complete solution to this Problem, because you want the target element stay on place on document resize, but if the user do a scroll on his page, it is not possible to know where staying on the same first word of the first line on display. So here, i just replace on the same target on top when user resize his document, even if he had done a scroll just before.

no need of this CSS part (remove it)

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

and change your jQuery to:

$(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);
    }
  });

});

My code speaks for itself, but here is a complete explanation:

the principle is simple: the function target css activates on a click on a link <a href="#..."> to trigger a scroll of the page towards the element having for id = to that contained in the initial href.

therefore this code intercepts any click on a link on the page and must first determine whether it is a link to an anchor or not.

To determine if this is a link to an anchor on the page, it simply tests whether an element of the page has this value as this ID , ( // check if InfoTarget.ID exists on page ).
As this kind of test can also generate an error, this test is placed in a try / catch .

If the result is indeed an anchor, then the action of the click is canceled, (with evt.preventDefault() ) which prevents the browser from triggering its automatic scroll to the link;

the reference link is kept in an object variable (global)

var InfoTarget = {ID: null, tempo: 300}

seen on: InfoTarget.ID = $(this).attr('href') // possible target elm

the rest is simple, you have to scroll down to the anchor. Depending on the width of the page and the previous elements, browsers continuously recalculate the position of each tag present on a page and jQuery can be retrieved this offset position by $(element).offset().Top

as there is a menu bar on your page that masks the top of the page, you must deduct its height from the position in scroll (= $ ('# header'). outerHeight (true))
a scroll = 0 will force a move to the top of the page
a scroll = $(element).offset().top places the element at the top of the page to which we must deduct the height of the #header

the complete formula is

scrollTop: ( $(InfoTarget.ID).offset().top - $('#header').outerHeight(true) )

this command is placed in a jQuery.animate , for a visually smoother move, and uses the InfoTarget.tempo value as the duration for this animation.

During a resize of the page, and to the extent that a link having a target has been previously clicked (therefore always active) then the same type of scroll is triggered.

The different jQuery methods used are all explained in the jQuery doc (for example: https://api.jquery.com/outerHeight/ )

New Solution -- Lundi 14 oct 2019 / 01:00 (in the night of sunday / monday)

this script must be placed after all the html elements of the body

// 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);
  }
}

In this version the target element is added a class (TargetMark) allowing to find it when window resize

ending part

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

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

about toggleMenu conflict:

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
  });
}

---

I spent a lot of my time on your question, I studied differents approaches and the different automatisms put at work by the navigators themselves and which is necessary to fight to get the result you'r looking for. I came to the conclusion that the problem first came from the architecture of your page.
The fact that the menu ("#header") covers the page ("#main") is a major flaw that prevents to have an effective JS code for your question.
The call on the hash of an anchor triggers one or more scrolls of the page, the resize of the page also entails a scroll calculation because by changing size on the screen, it also changes the size of the page. page (reducing the size of the screen by half makes the page size double), it is the same by changing the size of the font, it also changes the size in page.
Whenever the page size changes, the browser must recalculate a lot of things and some of these mechanisms can trigger one or more scrolls.
What you are asking here is to recalculate a page positioning according to an element of which we can not be certain that it is completely established because this process is executed in parallel with other processes of the browser which can change useful values.
Plus the fact that some of the browser processes also work to scroll the page and that it can be the last done!
So the fact that there is an overlap between the menu and the page add more complexity and makes the possibility of a solution impossible. Change your layout and 3/4 of your problem will be fixed.

I'm frankly discouraged by this project, my first solution worked, but you rejected it because your question was badly asked initially and did not mention navigation management. I took on myself and I deepened my analysis to propose another solution, there are only twenty lines of code each time, but believe it, they are the result of a few sleepless nights that I spent for you (I wrote it above, but obviously you do not care).

I think that your HTML page and your CSS are blocking any solution on this issue. Moreover, the whole could be written in a simpler and more efficient way. But that's another question and I prefer to spend my time on other topics here where I can growing my reputation points without striving on a time-consuming problem badly built.

Answer 2

Resize is firing, offset height is not changing. Setting the same value over and over again, yields no change. You might check this:

see the value change

I used the logo for output:

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

---

You want to scroll down to the one div selected by target without having it to be overlapped by your nav?

.. then extend the areas. see here add positive margin-top and negative padding-top .

.... to compensate for any nav size changes, use media queries to change your css vars.