Hi Ismael,
Thanks. The issue you pointed out was the socket CSS with position:fixed and now set to relative.

But the initial issue I’ve reported remains where I’m trying to overlap top right column into the columns(color sections) below. I tried using z-index as indicated and its still not working.

Thank you! Got it. Topic can be closed

That works without the code, but once I use the above code, that stops working.

Hi
Sorry Guenny 007 but I don’t understand how this solution, although very interesting, can help me. It may also be that I misunderstood how to use the files you kindly make available, but the links on the example page point to other pages, while I am trying to solve scrolling within the same page so that the anchorpoint content does not go under the Fullwidth Sub Menu of the ALB of tablets and mobiles.

Trying to resolve this issue, I had problems with pages scrolling in a jerky motion, but I figured out what my error was.
Mike had given me a function to solve the problem involving two screen widths < 989 and > 990.
Mike’s code works very well and gives no smooth scrolling problems.
I did, however, need a third screen width (> 768 < 989) because the Fullwidth Sub Menu of the ALB on mobile phones would go on two rows.
So I tried adding to the script:
else if ((width > 767 && width < 989)) {
At this point the scrolling of the site started to work horribly on all pages. It is obvious that I messed up something when I added the third screen width.
This is Mike’s code that works:

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if ((width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
    } 
    else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
    }
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

And this is the code revised by me that makes the whole site scroll badly even though it puts the anchor points in the right place:

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if (width < 767)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 220 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 220 //offset
        }, 1000);
        return false;
      }
    }
    } 
	else if ((width > 768 && width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 170 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 170//offset
        }, 1000);
        return false;
      }
    }
    } 
   else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 180 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 180//offset
        }, 1000);
        return false;
      }
    }
    } 
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

If anyone can help me, I’d like to figure out where I went wrong and be able to use three different offsets for the three different screen widths.

• This reply was modified 1 year, 9 months ago by manurimini.

Thank you! This works on desktop but noticed it is not centered when you adjust the browser down. Do you know how to make this responsive on all devices?

Hi Rikard,

I apologize for the delay in replying to your message. I have translated the Chinese sections into English for your reference.

Severity: Medium
CVSS Rating: 5.3
CVE::CVE-2007-3205
URL:: https://ai.ntu.edu.tw/wp-content/themes/enfold/js/waypoints/waypoints.min.js
Entity: PHP 7.4.33 (Component)
Risk: Using outdated or vulnerable versions exposes your application to potential security vulnerabilities
Cause: A vulnerable component was used in the test application.
Fix: Upgrade components to latest stable version
Testing requests and responses:
GET /wp-content/themes/enfold/js/waypoints/waypoints.min.js?ver=5.6.8 HTTP/1.1
Host: ai.ntu.edu.tw
Connection: keep-alive
sec-ch-ua: “Not)A;Brand”;v=”24″, “Chromium”;v=”116″
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
sec-ch-ua-platform: “Windows”
Accept: */*
Accept-Language: en-US
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: script
Referer: https://ai.ntu.edu.tw/
Content-Length: 0
HTTP/1.1 200 OK
Date: Thu, 06 Jun 2024 01:35:51 GMT
Server: Apache/2.4.59 (Unix) OpenSSL/3.3.0 PHP/7.4.33
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Last-Modified: Sat, 25 Feb 2023 10:52:11 GMT
ETag: “2307-5f58409b68cc0”
Accept-Ranges: bytes
Content-Length: 8967
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/javascript
/*!
Waypoints – 4.0.1
Copyright © 2011-2016 Caleb Troughton
Licensed under the MIT license.
https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
*/
!function(){“use strict”;var t=0,e={};function i(o){if(!o)throw new Error(“No options passed to Waypoint
constructor”);if(!o.element)throw new Error(“No element option passed to Waypoint constructor”);if(!o.handler)throw new
Error(“No handler option passed to Waypoint constructor”);this.key=”waypoint-
“+t,this.options=i.Adapter.extend({},i.defaults,o),this.element=this.options.element,this.adapter=new
i.Adapter(this.element),this.callback=o.handler,this.axis=this.options.horizontal?”horizontal”:”vertical”,this.enabled=this
.options.enabled,this.triggerPoint=null,this.group=i.Group.findOrCreate({name:this.options.group,axis:this.axis}),this.cont
ext=i.Context.findOrCreateByElement(this.options.context),i.offsetAliases[this.options.offset]&&
(this.options.offset=i.offsetAliases[this.options.offset]),this.group.add(this),this.context.add(this),e[this.key]=this,t+=
1}i.prototype.queueTrigger=function(t){this.group.queueTrigger(this,t)},i.prototype.trigger=function(t)
{this.enabled&&this.callback&&this.callback.apply(this,t)},i.prototype.destroy=function()
{this.context.remove(this),this.group.remove(this),delete e[this.key]},i.prototype.disable=function(){return
this.enabled=!1,this},i.prototype.enable=function(){return
this.context.refresh(),this.enabled=!0,this},i.prototype.next=function(){return
this.group.next(this)},i.prototype.previous=function(){return this.group.previous(this)},i.invokeAll=function(t){var i=
[];for(var o in e)i.push(e[o]);for(var n=0,r=i.length;n<r;n++)i[n][t]()},i.destroyAll=function()
{i.invokeAll(“destroy”)},i.disableAll=function(){i.invokeAll(“disable”)},i.enableAll=function(){for(var t in
i.Context.refreshAll(),e)e[t].enabled=!0;return this},i.refreshAll=function()
{i.Context.refreshAll()},i.viewportHeight=function(){return
window.innerHeight||document.documentElement.clientHeight},i.viewportWidth=function(){return
document.documentElement.clientWidth},i.adapters=[],i.defaults=

{context:window,continuous:!0,enabled:!0,group:”default”,horizontal:!1,offset:0},i.offsetAliases={“bottom-in-
view”:function(){return this.context.innerHeight()-this.adapter.outerHeight()},”right-in-view”:function(){return this.context.innerWidth()-this.adapter.outerWidth()}},window.Waypoint=i}(),function(){“use strict”;function t(t)
{window.setTimeout(t,1e3/60)}var e=0,i={},o=window.Waypoint,n=window.onload;function r(t)
{this.element=t,this.Adapter=o.Adapter,this.adapter=new this.Adapter(t),this.key=”waypoint-context-
“+e,this.didScroll=!1,this.didResize=!1,this.oldScroll=
{x:this.adapter.scrollLeft(),y:this.adapter.scrollTop()},this.waypoints={vertical:{},horizontal:
{}},t.waypointContextKey=this.key,i[t.waypointContextKey]=this,e+=1,o.windowContext||
(o.windowContext=!0,o.windowContext=new
r(window)),this.createThrottledScrollHandler(),this.createThrottledResizeHandler()}r.prototype.add=function(t){var
e=t.options.horizontal?”horizontal”:”vertical”;this.waypoints[e][t.key]=t,this.refresh()},r.prototype.checkEmpty=function()
{var
t=this.Adapter.isEmptyObject(this.waypoints.horizontal),e=this.Adapter.isEmptyObject(this.waypoints.vertical),o=this.elemen
t==this.element.window;t&&e&&!o&&(this.adapter.off(“.waypoints”),delete
i[this.key])},r.prototype.createThrottledResizeHandler=function(){var t=this;function e()
{t.handleResize(),t.didResize=!1}this.adapter.on(“resize.waypoints”,(function(){t.didResize||
(t.didResize=!0,o.requestAnimationFrame(e))}))},r.prototype.createThrottledScrollHandler=function(){var t=this;function e()
{t.handleScroll(),t.didScroll=!1}this.adapter.on(“scroll.waypoints”,(function(){t.didScroll&&!o.isTouch||
(t.didScroll=!0,o.requestAnimationFrame(e))}))},r.prototype.handleResize=function()
{o.Context.refreshAll()},r.prototype.handleScroll=function(){var t={},e={horizontal:
{newScroll:this.adapter.scrollLeft(),oldScroll:this.oldScroll.x,forward:”right”,backward:”left”},vertical:
{newScroll:this.adapter.scrollTop(),oldScroll:this.oldScroll.y,forwar
…
…
…

Thank you for your help!

Best regards,
Morcept

Feel free to close this topic.

Thank you too much, mike :)
I’m really happy with my site now and will look for this plugin you suggested.
Topic can be closed.

Best regards!