Home>


I want jQuery to work properly.


If i write it in html with

It seems that the pop pops up above and it can be read,

jQuery does not work properly.

I want the image animation to move when the section is reached,
It jumps to the URL and moves immediately.

<body>      ~ (Omitted)
    <section>      Company Profile                        </section>~ (Omitted)
        </body>
.section3 {
    background-color: white;
    position: relative;
  }
  .section3 h1 {
    position: absolute;
    left: 16%;
    top: 7%;
    text-align: center;
    font-size: 3em;
    font-family:'Raleway', sans-serif;
  }
  .section1 img {
    display: block;
    width: 40%;
    height: 100vh;
    float: right;
  }
  .img-wrap {
    overflow: hidden;
    position: relative;
  }
  .img-wrap:before {
    animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: ``;
    left: 0;
    pointer-events: none;
    position: absolute;right: 0;
    top: 0;
    z-index: 1;
  }
  @keyframes img-wrap {
    100% {
      transform: translateX(-100%);
    }
  }
// smooth scroll
  const paginations = document.querySelectorAll(".pagination a");
  paginations.forEach(pagination =>{
    pagination.addEventListener("click", e =>{
      e.preventDefault();
      const targetId = e.target.hash;
      const target = document.querySelector(targetId);
      target.scrollIntoView({ behavior: "smooth" });
    });
  });
  // Intersection Observer
  const sections = document.querySelectorAll(".section");
  const observerRoot = document.querySelector(".fullPageScroll");
  const options = {
    root: observerRoot,
    rootMargin: "-50% 0px",
    threshold: 0
  };

  /**
   * Function to call when crossing
   * @param entries-IntersectionObserverEntry Object passed when IntersectionObserver intersects.
   */
  function doWhenIntersect(entries) {
    entries.forEach(entry =>{
      if (entry.isIntersecting) {
        activatePagination(entry.target);
      }
    });
  };
  /**
   * A function that changes the size of pagination
   * @param element-HTMLElement Takes the HTML element of the currently displayed slide as an argument.
   */
  function activatePagination(element) {
    const currentActiveIndex = document.querySelector(
      "#pagination .active"
    );
    if (currentActiveIndex !== null) {
      currentActiveIndex.classList.remove("active");
    }
    const newActiveIndex = document.querySelector(
      `a[href='#${element.id}']`
    );
    newActiveIndex.classList.add("active");
  };

  $(window).scroll(function() {
    var windowHeight = $(window).height(100);
    topWindow = $(window).scrollTop(),
    targetPosition = $("section3").offset().top;
    const image = document.querySelectorAll('.img-wrap');const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio >0) {
          entry.target.classList.add('img-animation');
        } else {
          entry.target.classList.remove('img-animation');
        }
      });
    });

    Array.prototype.forEach.call(image, function(img) {
      observer.observe(img);
    });
  });
What I tried

Change the reading order in head

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>xxxx</title><link rel=stylesheet type="text/css" href="style.css"><script src="/Users/xxxx/Desktop/KK/js/jquery-3.5.0.js"></script><script src="/Users/xxxx/Desktop/KK/js/fullpage.js"></script><script src="/Users/xxxx/Desktop/KK/js/test.js"></script><link href="https://fonts.googleapis.com/css2?family=Raleway:ital,[email protected],200&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:[email protected]&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:[email protected]&display=swap" rel="stylesheet"></head>

Correspondence with script

<script>  $('.gnavCont a').click(function(){
      $('#navToggle').prop('checked', false);
    })
  </script>

If i click on the hamburger menu link above
If the menu is closed, script works normally.

$(window).scroll(function() {
    var windowHeight = $(window).height(100);
    topWindow = $(window).scrollTop(),
    targetPosition = $("section3").offset().top;
    const image = document.querySelectorAll('.img-wrap');
    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio >0) {
          entry.target.classList.add('img-animation');
        } else {
          entry.target.classList.remove('img-animation');
        }
      });
    });

    Array.prototype.forEach.call(image, function(img) {
      observer.observe(img);
    });
  });


You can't put this in script.....

Supplementary information (FW/tool ​​version, etc.)

Please provide more detailed information here.

  • Answer # 1

    Hello, I wrote only script of the scroll.

    $("section3").offset().top;


    I think it's strange.

    $("#section3").offset().top
    $(function () {
        $(window).scroll(function () {
            var windowHeight = $(window).height();
            (topWindow = $(window).scrollTop()), (targetPosition = $("#section3").offset().top);
            const image = document.querySelectorAll(".img-wrap");
            const observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.intersectionRatio >0) {
                        console.log(0);
                        entry.target.classList.add("img-animation");
                    } else {
                        console.log(1);
                        entry.target.classList.remove("img-animation");
                    }
                });
            });
            Array.prototype.forEach.call(image, function (img) {
                observer.observe(img);
            });
        });
    });

  • Answer # 2

    Should I do this, for example?